16

我在 blogger.com 上有一个小博客，我使用了一个简单的免费模板，我在那里找到了。偶尔我会发布关于我的发现的代码片段。代码的格式非常丑陋。我看到一些博主有花哨的模板来显示代码。

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

谢谢，我

4

9 回答 9

9

我必须定期将代码片段插入博客文章。我找到的最简单的方法是在 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/进行快速编辑

于 2013-09-11T01:10:58.783 回答
7

您可以使用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>

你可以在我的博客上看到例子

于 2010-07-08T20:38:30.870 回答
7

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

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

你需要知道的一切都可以在自述文件中找到

<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">or<pre class="prettyprint lang-yaml">'或 inline with的格式<code class="prettyprint">。

哦，它支持多种语言和主题。

于 2011-10-28T23:00:05.573 回答
5

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

如何：

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

  1. 如果您没有Bitbucket帐户，请创建一个
  2. 创建存储库并推送您的代码
  3. 打开一个像这样的源文件，然后单击嵌入。
  4. 将 javascript 复制到您的帖子中。

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

  1. 如果没有，请创建一个Github帐户。
  2. 转到Gist并将您的代码粘贴到 gist 中。
  3. 创建一个像这样的 Gist并单击嵌入。
  4. 复制您帖子中的 javascript

Blogger 动态视图的要点

  1. 参见Moski 的教程
于 2013-06-15T01:56:12.907 回答
1

通常，有一些插件可以实现您正在寻找的东西（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

于 2010-07-08T20:38:53.187 回答
0

大多数博客用户使用块引用来显示代码。这是一个非常错误的方法。Blockquotes 用于显示来自不同网页的作品，当用于代码时，它们会将它们格式化为难看的样式。使用<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

于 2013-08-11T19:51:25.093 回答
0

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

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

于 2013-12-25T10:46:54.910 回答
0

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

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

于 2014-01-06T09:01:52.887 回答
0

您可以使用 Google-Code-Prettify，它是 JavaScript 模块和 css 文件。这可以帮助您突出显示代码片段的语法。网络领域的许多知名人士都在使用 Google-Code-Prettify 来支持其网站中的语法高亮显示，例如 code.google.com 甚至 stackoverflow.com。这是在 Blogger 中安装和使用 Google-Code-Prettify 的方法。

于 2014-02-16T13:20:20.493 回答