如何在博客中显示代码段

我在blogger.com上有一个小博客，我使用了一个简单的免费模板，在那里找到了。我偶尔会发布关于我的发现的代码片段。代码被格式化为一种非常难看的方式。我看到那里有一些博客他们有显示代码的模板。如何在博客中显示代码段

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

感谢，我

2010-07-08 amok

如何链接到一个这样的博客与花哨的代码片段？ – 2010-07-08 20:37:48

[我如何在博客博客上更好地显示代码？]（http://stackoverflow.com/questions/1644201/how-can-i-display-code-better-on-my-blogger-blog） – paulmorriss 2014-01-17 10:37:25

我有同样的问题，但通过看本教程来解决它。 – 2013-10-28 21:29:32

我不得不经常插入代码片段到的相关博客文章。我发现的最简单的方法是在github上保留一个降价文件，然后将代码片段复制到博客上。它带有您所选语言的完整语法高亮显示。而且没有插件和直观，易于使用。

例如，如果您用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-11 01:10:58 samol

您能否详细说明“将代码片段复制到博客”部分的细节？ – Suhas 2013-10-30 22:07:46

@Suhas，因此基本突出显示您的要点中的代码片段，然后将其复制并粘贴到blogspot中。这是有效的，因为副本还会复制所有的html（其中包含突出显示），并且当html被粘贴到blogspot中时，它将被渲染。 – samol 2013-11-27 06:46:41

页面不可用 – programtreasures 2017-12-09 15:55:10

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

来源

2010-07-08 20:38:30 oscarkuo

仅供参考，该语法突出显示的方式很丑陋。只是在一篇关于如何解决这些问题的文章中指出讽刺意味。 :) – cHao 2010-07-08 20:54:34

通常，有插件实现你要找的内容（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-08 20:38:53 amfeng

我挣扎着试图让以SyntaxHighlighter的为长时间工作（Chrome和博客产生可怕的滚动的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。

来源

2011-10-28 23:00:05 TrophyGeek

您也可以从到位桶或要旨嵌入文件从GitHub：

如何：

到位桶（只针对非动态视图）

创建Bitbucket帐户，如果您没有一个
创建存储库并推送您的代码
打开您的源文件之一如this one并点击嵌入。
将javascript复制到您的文章中。

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

创建一个Github帐户，如果没有一个。
转到Gist，并将您的代码放在要点中。
创建一个这样的评论one并点击嵌入。
拷贝到您的帖子

要点包括Blogger动态的JavaScript访问量

见Moski's tutorial

来源

2013-06-15 01:56:12 IsKernel

非常感谢:) – 2016-11-08 06:16:11

大多数博客用户使用BLOCKQUOTE用于显示的代码。这是一个非常错误的方法。块引用是为了显示来自不同网页的效果，当用于代码将它们格式化为难看的风格时。使用<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-11 19:51:25

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

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

来源

2013-12-25 10:46:54

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

的想法是使用<pre><code>标签和使用JavaScript

来源

2014-01-06 09:01:52

您可以使用谷歌典，美化它的JavaScript模块和CSS文件计算行数。这可以帮助您突出显示代码片段的语法。网络领域的许多大牌公司都在使用Google-Code-Prettify为其网站中的语法突出显示提供支持，例如code.google.com甚至stackoverflow.com。这是一个method for installing and using Google-Code-Prettify in Blogger。

来源

2014-02-16 13:20:20

如何在博客中显示代码段

回答

相关问题