Question

我在blogger.com上有一个小博客，我使用了一个我在那里发现的简单免费模板。有时我会发布关于我的发现的代码片段。代码以非常丑陋的方式进行格式化。我在那里看到一些博主他们有很好的模板来展示代码。

我在哪里可以找到博主这样的模板？或者我能做些什么来实现同样的目标？

谢谢，我

Answer 1

我努力让SyntaxHighlighter工作很长时间（Chrome和Blogger制作了可怕的滚动div）。

我最终选择了Google Code Prettify。它似乎比SyntaxHighlighter更直接，但效果很好。

您需要知道的所有内容都可以在README

中找到

将脚本加载到博客模板的<head>部分：

<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' />
<script language='javascript'  type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js'/>

<script type='text/javascript'>
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(prettyPrint);
</script>

使用<pre class="prettyprint">或<pre class="prettyprint lang-yaml">'或与<code class="prettyprint">内联的格式。

哦，它支持多种语言和themes。

Answer 2

您可以使用SyntaxHighlighter，作者提供了托管版本，因此您只需转到您的博客模板，选择编辑HTML并将以下代码添加到页面的开头

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.all();
</script>

您可以在my blog

上看到示例

Answer 3

我必须定期将代码段插入博客帖子中。我找到的最简单的方法是在github上保留一个markdown文件，然后将代码片段复制到博客上。它以您选择的语言提供完整的语法高亮显示。而且没有插件直观，易于使用。

例如，如果你用Ruby编写，你需要做的就是写这个

```ruby
  [Your ruby code goes here]
```

例如，这是我最近发布的一篇博客文章，其中包含语法高亮显示 http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html

这是与博文相对应的降价文件。 https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md

PS：如果你想要一种更快的方式来编辑你的降价，我还建议http://dillinger.io/进行快速编辑

Answer 4

您还可以从Github中嵌入来自Bitbucket或Gists的文件：

如何：

Bitbucket （仅适用于非动态视图）

如果您没有

Bitbucket

创建存储库并推送代码
打开您的一个源文件，例如this one，然后点击嵌入。
将javascript复制到您的帖子。

要点（对于非动态视图。请参阅下面的动态视图）

如果没有帐户，请创建一个Github帐户。
转到Gist并按照要求填写您的代码。
像这样one创建一个Gist，然后点击embed。
复制帖子中的javascript

Blogger动态视图的要点

请参阅Moski's tutorial

Answer 5

通常，有一些插件可以实现您所需要的功能（Wordpress有吨和吨），但我不确定Blogger。

你可以使用Javascript做同样的事情;这是一个例子：http://www.halhelms.com/blog/index.cfm/2008/12/11/Code-Formatting-in-Blog-Pages-with-jQuery

或者这个： http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

Answer 6

大多数博客用户使用blockquote来显示代码。这是一种非常错误的做法。 Blockquotes用于显示来自不同网页的exerts，当用于代码时，它们将它们格式化为难看的样式。使用<pre> and <code>标记显示您的代码。然后，浏览器将显示您的代码。这是格式 -

<pre>
<code>
your code goes here
</code>
</pre>

详细了解为何将这些标记用于博主 - http://www.howtokickblogger.com/2013/06/blockquote-code-or-pre-tag-for-blogger.html

Answer 7

我使用syntaxhighlighter 3+ javascript库。我为博客写了一篇简单的帖子，这是一个更优化的配置。

http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.html

Answer 8

我已经实现了一个工具，可以格式化您的代码并在博客中显示它。在这里试试吧 http://www.dukaweb.net/p/format-source-code.html

这个想法是使用<pre><code>标记并使用javascript计算行数

Answer 9

您可以使用Google-Code-Prettify，它是JavaScript模块和css文件。这可以帮助您在语法高亮显示代码片段。网络领域的许多知名人士正在使用Google-Code-Prettify来强化其网站中的语法突出显示功能，例如： code.google.com甚至stackoverflow.com。这是method for installing and using Google-Code-Prettify in Blogger。

如何在博客中显示代码段

9 个答案: