如何在博客上更好地显示代码?

These days, in any site where they show a code fragments (even in *), the code is nicely wrapped around a GUI element which highlights syntax elements, provides line numbers, etc. I want to show some ruby on rails code in my blog and I want those visual elements in my blog.

这些天,在任何网站显示代码片段(即使在*),代码很好地缠绕在一个GUI元素,强调语法元素,提供了行号,等等。我想展示一些ruby on rails代码在我的博客和我的博客。希望这些视觉元素

How can I accomplish this on my blogger blog?

我如何在我的博客上完成这个?

6 个解决方案

#1

Click on "Edit HTML" in Blogger and then insert the following in the <head> section of your HTML:

点击Blogger中的“编辑HTML”，然后在HTML的部分插入以下内容:

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js"></script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" />     <script language="javascript">
window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    dp.SyntaxHighlighter.BloggerMode();
}
</script>

and the following into the <body> wherever you want to put your code:

在中输入以下代码:

<pre class="brush: ruby" name="code"># Your Ruby Code</pre>

#2

http://code.google.com/p/syntaxhighlighter/

http://www.pseudocoder.com/blog/javascript-code-highlighter-chili-vs-syntaxhighlighter

http://www.1stwebdesigner.com/resources/16-free-javascript-code-syntax-highlighters-for-better-programming/

#3

SyntaxHighlighter is the way to go, but all the given links here did not work for me.

SyntaxHighlighter是一种方法，但是这里所有给定的链接对我无效。

I found a complete, 2 step guide to installing the latest 3.x version in Blogger that actually works here.

我找到了一个完整的2步安装最新3的指南。x版本的Blogger，在这里工作。

#4

Using the links Alex Reitbort provided you can integrate this in your Blogger blog using one of the following tutorials:

使用Alex Reitbort提供的链接，您可以使用以下教程之一在您的博客中集成这一点:

http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html
http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html
http://abhisanoujam.blogspot.com/2008/12/blogger-syntax-highlighting.html

http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html

#5

The issue with using Javascript to Dynamically create code syntax style at runtime are:

使用Javascript在运行时动态创建代码语法样式的问题是:

Page loads slowly
页面加载缓慢
The initial look of the code displayed is in raw format
显示的代码的初始外观是原始格式
Nevers works if javascript is disabled
如果禁用了javascript，则Nevers会正常工作

The Better technique would be to just copy paste the HTML, generated using some convertors.

更好的技术是复制粘贴HTML，使用一些转换器生成。

Online Syntax Highlight Generator Tool

在线语法突出显示生成器工具

codeworkout.blogspot.com/2014/07/online-generator-tool-for-code-syntax_18.html

#6

I found one website which converts my code to the blogger compatible format. It meets my need and takes almost no time.

我发现了一个网站，它把我的代码转换成博客兼容的格式。它满足了我的需要，而且几乎不花时间。

http://codeformatter.blogspot.de/2009/06/bugs-fixed.html

#1