如何在博客中显示代码段

Question

如何在博客中显示代码段

amo*_*mok 15 blogger

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

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

谢谢,是的

Answer 1

Tro*_*eek 7

我努力让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>

Run Code Online (Sandbox Code Playgroud)

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

哦,它支持多种语言和主题.

Answer 2

osc*_*kuo 6

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 3

小智 5

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

如何：

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

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

要点（对于非动态视图。动态视图见下文）

如果没有，请创建一个Github帐户。
转到要点并将您的代码传递到要点中。
创建这样的要点一个，点击嵌入。
复制您帖子中的 javascript

Blogger 动态视图的要点

参见Moski 的教程

Answer 4

sam*_*mol 5

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

例如,如果你用Ruby编写,你需要做的只是写这个

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

Run Code Online (Sandbox Code Playgroud)

作为一个例子,这是我最近发布的一篇博客文章,其语法高亮显示 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/进行快速编辑

归档时间：	15 年，8 月前
查看次数：	20126 次
最近记录：	7 年，4 月前