自定义Blogger：语法高亮、首行缩进、行距、字号
语法高亮
使用prettify打开
Template -> Edit HTML，在编辑器的前几行找到<head>标签（可以用Ctrl+F查找），在<head>标签下插入如下内容：<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>Save Template，保存即可。使用方法
<pre class="prettyprint">...</pre> <!--或者-->
<code class="prettyprint">...</code>
<pre class="prettyprint linenums:4"> ... </pre> <!--行号从4开始-->
<pre class=prettyprint>
int x = foo(); /* This is a comment <span class="nocode">This is not code</span>
Continuation of comment */
int y = bar();
</pre>int x = foo(); /* This is a comment <span class="nocode">This is not code</span>
Continuation of comment */
int y = bar();首行缩进、行距、字号
许多博客默认的字号和行距太小，阅读时眼睛很累，看到那些密密麻麻的文字就没有仔细读的欲望。我喜欢行与行之间的距离大一点。字体也大一点。五号字适合打印，但绝对不适合屏幕阅读。在Blogger后台
Template -> Customize -> Advanced -> Add CSS里添加以下内容
.post-body p {
text-indent: 2.0em;
line-height:150%;
font-size: 17px;
}
.post-body li{
line-height: 1.5em;
margin-bottom: 1em;
margin-top: 1em;
}
h2{
font-size: 1.3em;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
h3{
font-size: 1.2em;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
h4{
font-size: 1.1em;
margin-top: 1em;
margin-bottom: 1.1em;
}Written with StackEdit.
No comments:
Post a Comment