71

如何在 Blogger 的新界面上设置语法荧光笔？我确实尝试了很多选择，但没有任何效果。请提出任何建议。

4

3 回答 3

130

1. 首先，备份您的博客模板
2. 之后打开您的博客模板（在编辑 HTML 模式下）并复制 此链接中给出</b:skin>的所有 css 在标签之前
3.在标签之前 粘贴以下</head>代码

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4.在标签 前粘贴以下代码</body>。

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. 保存博客模板。
6. 现在语法高亮已经可以使用了，你可以将它与<pre></pre>标签一起使用。

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7.你可以在这里 转义你的代码。
8. 这里是<class>属性支持的语言列表。

于 2012-06-01T10:44:37.027 回答
23

结帐http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

这是一个非常简单的“SyntaxHighlighter for Blogger”教程，包含屏幕截图和所有内容。

您应该只需几分钟即可启动并运行。

此外，本教程是围绕您所指的“新界面”构建的。

希望这可以帮助。快乐编码。

于 2012-04-29T17:52:32.597 回答
1

根据您的模板，SyntaxHighlighter JavaScript 代码可能会在内容加载之前运行。在这种情况下，将代码更改为在短暂超时后运行应该可以解决问题。<head>在您的模板 HTML中尝试此操作：

<script type="text/javascript">
window.setTimeout(function() {
    SyntaxHighlighter.config.bloggerMode = true;
    语法Highlighter.all();
}, 10);
</脚本>

您可以在调用ScriptHighlighter.all().

如果您想自定义 SyntaxHighlighter 代码显示的外观和感觉，请添加一些 CSS，如下所示：

.syntaxhighlighter 代码 {
  字体家族：康索拉斯！重要；
  字体大小：10px！重要；
}

有!important必要覆盖 SyntaxHighlighter 主题定义。

于 2013-03-10T22:40:41.017 回答