为 Blogger 上的博客格式化代码片段 [关闭]

Posted 2023-02-18

技术标签:

【中文标题】为 Blogger 上的博客格式化代码片段 [关闭]【英文标题】：Formatting code snippets for blogging on Blogger [closed] 【发布时间】：2010-10-15 07:37:52 【问题描述】：

我的博客托管在 Blogger 上，我经常在 C/C#/Java/XML 等中发布代码 sn-ps，但我发现 sn-p 被“损坏”了。

是否有任何网站可以用来预先解析 sn-p 并整理格式，将 XML "&lt;" 转换为 "&lt;" 等。

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

Edit: 对于@Rich 的回答，站点声明“要在您的站点上显示格式化代码，您需要获取此 CSS 样式表，并在您页面的 <head> 部分添加对它的引用"。这就是问题所在 - 您无法在 Blogger AFAIK 上执行此操作。

【问题讨论】：

显示格式化代码：如果您使用的是Visual Studio，那么您可以将任何类型的代码html/css/javascript/c#等复制到博客。您必须安装 Visual Studio 生产力工具：更多信息请阅读：coding-issues.blogspot.in/2013/10/… 试用插件Paste As Visual Studio Code for Windows Live Writer for Blogger 离线编辑器。 所见即所得！. 您是否缺少像 WordPress 这样的 社交内容储物柜？现在你也可以在博客中添加这个***.com/questions/27619171/… 您可以使用此网站获取各种语言的代码尖晶石高亮代码。它为您提供 html，您可以将其发布在您的博客中 hilite.me 您可以复制intellij中的代码并粘贴到您的博客中。它在我的博客中对我来说就像一个魅力 - codetails.blogspot.com/2017/11/design-pattern-in-java.html 【参考方案1】：

我创建了一篇博文，解释了如何使用 syntaxhighlighter 2.0 向博主添加代码语法高亮

这是我的博文：

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

我希望它对你们有帮助。我对它的功能印象深刻。

以上链接停止工作。尝试使用http://hilite.me/

【讨论】：

谁能确认这是否仍然有效？我尝试在 </head> 部分之前粘贴脚本标记，并在我的代码周围添加了 pre 标记。不过没有变化。我花了几个小时在上面，但我根本无法让它工作。 DYNAMIC 视图博主无法正常工作，您能提供其他选择吗？这是我的动态视图博客satindersinght.blogspot.in 看起来您应该复制和粘贴的代码顶部缺少某些内容，特别是 Samuel's answer 要好得多。我不喜欢仅仅为了语法高亮而在我的博客上添加这么多 javascript。尤其是没有任何语法要突出显示的页面是一种矫枉过正。【参考方案2】：

共享代码的最简单方法是使用公共要点。只需编写一个并粘贴到嵌入代码中。轻松愉快。

http://gist.github.com

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

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

【讨论】：

哥们，用了20分钟，真是太感谢你了！最好的格式，没有麻烦，所有代码都在一个地方，帖子看起来很漂亮，帖子的编辑非常容易，因为您不会将代码与帖子的其余部分混淆，也不必担心您会这样做一些愚蠢的东西并丢失/错误格式化任何代码。谢谢你！嵌入是javascript，很有可能它是不可见的搜索。这对于博客文章来说几乎是致命的。我目前正在使用 gists，但我可能会再次使用 SyntaxHighlighter。不仅 gist 使用 JavaScript（这使得它们在 RSS 阅读器中也无法访问），而且还会减慢页面加载速度，因为每个 gist 都是按顺序下载的，阻塞渲染。不是一个好的选择。谢谢！你让我今天一整天都感觉很好。我将分享这个为博主添加要点的脚本：github.com/moski/gist-Blogger 这个想法真的很好用！结果就是我想要的；格式良好的代码...但我不会使用它。我宁愿让我的帖子本身完整。将作为帖子一部分的代码托管在其他地方并通过 js 包含在内，这就是失败！【参考方案3】：

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

【讨论】：

以前用hilite.me，现在更喜欢dillinger.io 我也更喜欢这个而不是 gist.github。无需 javascript 和其他样式/css。谢谢你，先生。【参考方案4】：

这个 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>

如何使用：

将此 sn-p 粘贴到文本编辑器中，将您的代码粘贴到 >>>>> 块中。全部复制并粘贴到博客（或任何其他）帖子编辑器中的 HTML 视图。

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

【讨论】：

我认为最简单整洁的回复。只需创建一个内部 CSS 就可以了。对我也很好。简单的解决方案【参考方案5】：

这可以通过 SyntaxHighlighter 轻松完成。我的博客上有step-by-step instructions for setting up SyntaxHighlighter in Blogger。 SyntaxHighlighter 非常易于使用。它允许您以原始形式发布 sn-ps，然后将它们包装在 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 标记让您可以在其中放置几乎任何代码，而不必担心实体转义或其他典型的代码博客烦恼。

【讨论】：

您的指示对我来说比其他主要答案更有效。如果有人发现自己在寻找它们，here 是捆绑画笔及其别名的列表。【参考方案6】：

1. 首先，备份您的博客模板2. 然后打开您的博客模板（在编辑 HTML 模式下）并复制所有 css @ 987654321@</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>

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> 支持的语言列表 b> 属性。

【讨论】：

一个不错的链接。如果是彩色的就更好了！ +1 @le_garry : 谢谢我在格式化代码 sn-p 时遇到了一些问题，所以它没有颜色。查看 gissolved 的答案。迄今为止我见过的最好的荧光笔，它确实有颜色。 @le_garry 哦，您正在讨论在 Blogger 中突出显示语法它与颜色配合得很好。我误解了你在接受我的回答所以，我很难过我遇到了一些问题.. @MaheshMeniya 我遵循了你为语法 syntaxhighlighter 编写的所有步骤，但它不起作用，还有什么额外的想法吗？【参考方案7】：

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

【讨论】：

我将它用于我的博客。对于喜欢颜色的人来说，这不是颜色代码！我喜欢它简单明了。【参考方案8】：

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

【讨论】：

是的 - tohtml 是 TechNet Wiki 推荐的粘贴代码的解决方案！ @Phil Hale 该工具没有缩进这是迄今为止我找到的最佳解决方案。谢谢【参考方案9】：

这里是one site，它将格式化您的代码并输出 html，它甚至包括用于语法着色的内联样式。可能无法满足您的所有需求，但这是一个好的开始。如果您想扩展它，我相信他已经提供了源代码：

【讨论】：

不工作了。【参考方案10】：

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

Free Online C# Code Colorizer

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

【讨论】：

【参考方案11】：

我将SyntaxHighlighter 用于我的 Blogger 支持的博客。实际的网站托管在我自己的服务器上，而不是 Blogger 的服务器上（Blogger 可以选择 ftping 帖子到您自己的网站），但拥有自己的域和网络托管每月只需花费几美元。

【讨论】：

同意 - 如果我托管自己的博客，有很多选择，但当博客实际上由 Blogger 托管时，似乎没有太多支持。【参考方案12】：

SyntaxHighlighter 2.0 似乎进行了一些更改，使其更易于与 Blogger 一起使用。

有hosted versions的样式和Javascripts在：http://alexgorbatchev.com/pub/sh/

【讨论】：

【参考方案13】：

实际上我用过（还有什么 ;-) ） Vim ：它有一个 2html“插件”。见the docs here。

所以当我编辑我的代码时，我只是将它转换为 HTML 并将结果粘贴到 Blogger 的 HTML 编辑器中。

注意：它不是那么漂亮的 HTML（嵌入 css 会更好），但它可以工作。

哦：它有多种语言的语法文件，非常有用。

【讨论】：

【参考方案14】：

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

blog-htmlize-buffer blog-htmlize-region blog-htmlize-buffer-with-linum blog-htmlize-region-with-linum

这些函数将在 emacs 的新缓冲区中输出可复制粘贴的 html（内联样式），您可以直接在博客文章中使用。输出看起来与您在 emacs 中看到的代码完全相同（包括配色方案）。

这里是link to my blog，您可以在其中找到有关如何在 emacs 中使用“blog-htmlize.el”的详细信息。这也消除了对“小于”和“大于”符号的 html 编码。而且由于emacs会做所有的高亮和样式，你不必担心js库是否支持你sn-ps的语言，也不必在blogger中干预你的模板代码。

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

【讨论】：

【参考方案15】：

我在 F# 中推出了自己的方法（请参阅this 问题），但它仍然不完美（我只是使用正则表达式，所以我无法识别类或方法名称等）。

基本上，据我所知，如果您在 Compose 和 HTML 模式之间切换，博客编辑器有时会吃掉您的尖括号。所以你必须粘贴到 HTML 模式然后直接保存。（我可能错了，现在刚刚尝试过，它似乎可以工作 - 取决于浏览器？）

如果你有泛型，那就太可怕了！

【讨论】：

【参考方案16】：

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

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

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

【讨论】：