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

nzp*_*mad 278 formatting blogs blogger

我的博客托管在Blogger和我经常在后的代码片断C/ C#/ Java/ XML等,但我发现片断变得"错位".

是否有任何网站可以用来预先解析片段并整理格式,将XML" <" 转换为" &lt;"等.

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

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

Cra*_*lla 252

我创建了一个博客文章,解释了如何使用syntaxhighlighter 2.0 向博客添加代码语法高亮

这是我的博文:

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

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

  • [塞缪尔的回答](http://stackoverflow.com/a/9009231/979772) 好多了。我不喜欢在我的博客上添加这么多 javascript 只是为了突出语法。特别是那些没有任何语法要突出显示的页面是一种矫枉过正的行为。 (3认同)
  • 任何人都可以确认这是否仍然有效?我尝试在`</ head>`部分之前粘贴脚本标记,并在我的代码周围添加了pre标记.虽然没有变化. (2认同)
  • 我花了几个小时在它上面,我根本无法让它工作. (2认同)
  • 它不适用于 DYNAMIC 视图博主,您能提供任何替代方案吗?继承人我的博客动态视图 http://satindersinght.blogspot.in/ (2认同)
  • 看起来您应该复制和粘贴的代码顶部缺少某些内容,特别是 &lt;script&gt; 标记。 (2认同)

yod*_*een 121

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

http://gist.github.com

要解决搜索引擎问题,可以使用div页面上隐藏的内容,如下所示:

<div style="display:none"> content </div>
Run Code Online (Sandbox Code Playgroud)

  • 嵌入是javascript,很有可能它是搜索不可见的.对博客文章来说,这几乎已经成功了. (19认同)
  • 我目前正在使用gists但我可能会再次使用SyntaxHighlighter.不仅要点使用JavaScript(这使得它们在RSS阅读器中也无法访问),而且还会减慢页面加载速度,因为每个要点都会按顺序下载阻止渲染.不是一个好选择. (6认同)
  • 这个想法真的很好用!结果就是我需要的;格式很好的代码...但我不会用它。我宁愿让我的帖子本身完整。将作为帖子的一部分的代码托管在其他地方并通过 js 包含在内,只会打败它! (2认同)

Sam*_*uel 62

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


gti*_*333 38

这个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>
Run Code Online (Sandbox Code Playgroud)

如何使用 :

  1. 将此代码段粘贴到文本编辑器中,
  2. 将您的代码粘贴到<<<<<< >>>>>>阻止.
  3. 复制全部和
  4. 粘贴到博客(或任何其他)帖子编辑器中的HTML视图.

优点:简单易用,配置少,易于重新配置,无需额外软件


Ala*_*Dea 15

使用SyntaxHighlighter可以非常轻松地完成此操作.我有关于在博客设置Blogger中的SyntaxHighlighter的分步说明.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>
Run Code Online (Sandbox Code Playgroud)

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

  • 您的指示比其他主要答案对我更有效。如果有人发现自己正在寻找它们,[这里](http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/) 是捆绑画笔及其别名的列表。 (2认同)

Mah*_*iya 13

1. 首先,把你的博客模板的备份
2. 之后打开你的博客模板(在编辑HTML模式)复制所有的CSS 在这个环节上给予</b:skin>标签
3 粘贴前followig代码</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>
Run Code Online (Sandbox Code Playgroud)

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

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

7. 你可以逃脱你的代码在这里.
8. 以下<class>属性支持的语言列表.


Gob*_*0st 8

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


Ric*_*ich 5

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


Phi*_*ale 5

我使用技术含量较低的解决方案。我使用此在线语法突出显示工具格式化代码,然后将其粘贴到博客中


Pav*_*dov 5

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

免费在线 C# 代码着色器

除了为您的 C# 代码着色外,该工具还负责将所有“<”和“>”符号转换为“<” 和'>'。制表符被转换为空格,以便在不同的浏览器中看起来相同。您甚至可以使着色器内联 CSS 样式,以防您不能或不想在博客或网站中插入 CSS 样式表。