在Blogger上格式化博客的代码段

时间:2009-03-24 20:49:36

标签: formatting blogs blogger

我的博客托管在Blogger上,我经常在C / C# / Java / XML等位置发布代码段,但我发现该代码段遭到“损坏”

我是否可以使用任何网站预先解析代码段并整理格式,将XML“<”转换为“&lt;”等。

关于这个领域有很多问题,但我找不到任何直接解决这个问题的问题。

Edit:对于@Rich回答,网站声明“要在您的网站上显示格式化代码,您需要获取此CSS样式表,并在{{1}中添加对它的引用页面部分“。这就是问题 - 你不能在Blogger AFAIK上做到这一点。

16 个答案:

答案 0 :(得分:248)

我创建了一篇博客文章,其中介绍了如何使用syntaxhighlighter 2.0

向博主添加代码语法突出显示

这是我的博文:

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

我希望它可以帮助你们......我对它能做的事情印象深刻。

答案 1 :(得分:118)

分享代码的最简单方法是使用公共要点。只需编写一个并粘贴嵌入代码即可。容易腻。

http://gist.github.com

要解决搜索引擎问题,可以在页面上使用隐藏的div,简单如下:

<div style="display:none"> content </div>

答案 2 :(得分:60)

对于我的博客,我使用http://hilite.me/来格式化源代码。它支持许多格式和输出相当干净的HTML。但是如果你有很多代码片段,那么你必须做很多复制粘贴。为了格式化Python代码,我还使用了Pygmentsblog post)。

答案 3 :(得分:37)

这个css脚本可能对所有人都有用 - 它不是用于语法高亮,但适用于以原始格式呈现源代码:

 <pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; 
                color: #000000; background-color: #eee;
                font-size: 12px; border: 1px dashed #999999;
                line-height: 14px; padding: 5px; 
                overflow: auto; width: 100%">
       <code style="color:#000000;word-wrap:normal;">

            <<<<<<<YOUR CODE HERE>>>>>>>

       </code>
 </pre>

使用方法:

  1. 将此代码段粘贴到文本编辑器中
  2. 将您的代码粘贴到&lt;&lt;&lt;&lt;&lt;&lt;&lt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;块。
  3. 全部复制
  4. 粘贴到博客(或任何其他)帖子编辑器中的HTML视图。
  5. 优点:简单易用,配置少,易于重新配置,无需额外软件

答案 4 :(得分:15)

使用SyntaxHighlighter可以相当容易地完成。我的博客上有step-by-step instructions for setting up SyntaxHighlighter in Blogger。 SyntaxHighlighter非常易于使用。它允许您以原始形式发布片段,然后将它们包裹在pre块中,如:

<pre name="code" class="brush: erlang"><![CDATA[
-module(trim).

-export([string_strip_right/1, reverse_tl_reverse/1, bench/0]).

bench() -> [nbench(N) || N <- [1,1000,1000000]].

nbench(N) -> {N, bench(["a" || _ <- lists:seq(1,N)])}.

bench(String) ->
    {{string_strip_right,
    lists:sum([
        element(1, timer:tc(trim, string_strip_right, [String]))
        || _ <- lists:seq(1,1000)])},
    {reverse_tl_reverse,
    lists:sum([
        element(1, timer:tc(trim, reverse_tl_reverse, [String]))
        || _ <- lists:seq(1,1000)])}}.

string_strip_right(String) -> string:strip(String, right, $\n).

reverse_tl_reverse(String) ->
    lists:reverse(tl(lists:reverse(String))).
]]></pre>

只需将画笔名称更改为“python”或“java”或“javascript”,然后粘贴您选择的代码即可。 CDATA标记允许您在其中放置几乎任何代码,而不必担心实体转义或其他典型的代码博客烦恼。

答案 5 :(得分:12)

1。首先,备份您的博主模板
2。之后打开博客模板(在编辑HTML模式下)&amp;在</b:skin>标记之前复制所有css given in this link 3。</head>代码

之前粘贴代码
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

4. </body>代码之前粘贴以下代码。

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

5. 保存Blogger模板。
6。现在可以使用语法突出显示,您可以将其与<pre></pre>标记一起使用。

<pre name="code">
...Your html-escaped code goes here...
</pre>

<pre name="code" class="php">
    echo "I like PHP";
</pre>

7。您可以转义代码here 8。 Here <class> 属性支持的语言列表。

答案 6 :(得分:6)

这里的one site将格式化您的代码并吐出html,它甚至包括用于语法着色的内联样式。可能不适用于所有您的需求,但这是一个良好的开端。如果你想扩展它,我相信他已经提供了源代码:

答案 7 :(得分:6)

http://formatmysourcecode.blogspot.co.uk/ 工作正常,你只需复制,格式化,粘贴。

答案 8 :(得分:4)

我使用相当低技术的解决方案。我使用此online syntax highlighting工具格式化代码,然后将其粘贴到博客中

答案 9 :(得分:4)

我创建了一个完成工作的工具。你可以在我的博客上找到它:

Free Online C# Code Colorizer

除了为C#代码着色外,该工具还会处理所有'&lt;'和'&gt;'符号将它们转换为'&amp; lt;'和'&amp; gt;'。选项卡将转换为空格,以便在不同的浏览器中看起来相同。您甚至可以使着色器内嵌CSS样式,以防您不能或不想在博客或网站中插入CSS样式表。

答案 10 :(得分:3)

我在Blogger支持的博客中使用SyntaxHighlighter。实际网站托管在我自己的服务器而不是Blogger上(Blogger可以选择将帖子发布到您自己的网站上),但拥有自己的域名和网络托管只需每月花费几美元。

答案 11 :(得分:3)

SyntaxHighlighter 2.0似乎发生了一些变化,使其更容易与Blogger一起使用。

hosted versions

中有http://alexgorbatchev.com/pub/sh/个样式和Javascripts

答案 12 :(得分:2)

实际上我曾经使用过(还有什么;-))Vim:它有一个2html“插件”。请参阅the docs here

因此,当我编辑代码时,我只需将其转换为HTML并将结果粘贴到Blogger的HTML编辑器中。

注意:它不是那么漂亮的HTML(嵌入式CSS会更好),但它只是有效。

哦:它有几种语言的语法文件,这非常有用。

答案 13 :(得分:1)

Emacs具体答案:就博客而言,它允许内联css。基于javascript的荧光笔的问题在于你必须使用他们的配色方案或实现自己的配色方案。但是,和我一样,如果你是自己的emacs配色方案的粉丝,你有更好的选择。我已经破解了emacs的“htmlize.el”包,以添加以下四个功能......

  1. 博客-htmlize缓冲
  2. 博客-htmlize区域
  3. 博客-htmlize缓冲器与 - 亚麻
  4. 博客-htmlize区域与 - 亚麻
  5. 这些函数会在emacs的新缓冲区中输出copy-paste ready html(内联样式),您可以直接在博文中使用。输出看起来与您在emacs中看到的代码完全相同(包括颜色方案)。

    这是一个link to my blog,您可以在其中找到有关如何将“blog-htmlize.el”与emacs一起使用的详细信息。这也消除了html编码的“小于”和“大于”的标志。由于emacs正在进行所有突出显示和样式设置,因此您不必担心js库是否支持您的代码段语言,也不必在博客中插入模板代码。

    您可以找到elisp file here(将文件另存为 blog-htmlize.el

答案 14 :(得分:0)

我在F#中自己编写(请参阅this问题),但它仍然不完美(我只是做正则表达式,所以我不识别类或方法名称等。)。

基本上,据我所知,如果您在Compose和HTML模式之间切换,博客编辑器有时会吃尖括号。所以你必须粘贴到HTML模式然后直接保存。 (我可能在这方面做错了,现在只是尝试过它似乎有效 - 浏览器依赖吗?)

当你有仿制药时,这太可怕了!

答案 15 :(得分:0)

要发布您的html,javascript,c#和java,您应该将特殊字符转换为HTML代码。作为'<' &lt;'>'&gt;和e.t.c ..

将此链接Code Converter添加到iGoogle。这将帮助您转换特殊字符。

然后添加SyntaxHighlighter 3.0.83新版本以在博客中自定义您的代码。但您应该知道如何在博客模板中配置syntaxHighlighter。