格式化代码片段以在Blogger上进行博客发布[关闭]

282

我的博客托管在Blogger上，我经常在C/ C#/ Java/ XML等位置发布代码段，但是我发现该代码段“被缠住了”。

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

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

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

formatting  blogs  blogger 
— rbrayb
source
3
要显示格式化的代码：如果使用的是Visual Studio，则可以将任何类型的代码html / css / javascript / c＃等复制到博客。您必须安装Visual Studio生产力强大的工具：有关更多信息，请阅读：coding-issues.blogspot.in/2013/10/…–
— Ranadheer Reddy
尝试将插件粘贴为Visual Studio Code for Windows Live Writer for Blogger脱机编辑器。所见即所得！。
— herohuyongtao
您是否缺少WordPress之类的社交内容更衣柜？现在你可以在博客也添加此stackoverflow.com/questions/27619171/...
— 误差Lerr克雷格
1
您可以使用此网站来获取各种语言的代码多面体突出显示代码。它为您提供了html，您可以将其发布到您的博客hilite.me
— Bhavikkumar，2016年
您可以在intellij中复制代码，然后粘贴到博客中。在我的博客-codetails.blogspot.com/2017/11/design-pattern-in-java.html中
— user3871494

Answers:

253

我创建了一个博客文章条目解释如何使用代码语法高亮显示添加到博客SyntaxHighlighter的 2.0

这是我的博客文章：

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

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

— CraftyFella
source
2
谁能确认这是否仍然有效？我尝试在该</head>部分之前粘贴script标记，并在代码周围也添加了pre标记。虽然没有变化。
— arviman
2
我花了几个小时在上面，我根本无法使用它。
— thepaulpage
1
对于DYNAMIC视图博客作者来说，它不能正常工作，您能提供其他选择吗？这是我的博客，具有动态视图satindersinght.blogspot.in
— Satinder singh，
1
您应该复制和粘贴的代码似乎在顶部缺少某些内容，特别是<script>标记。
— 约翰·利特尔（Little Little）
1
塞缪尔的答案要好得多。我不喜欢在我的博客上添加太多的JavaScript，仅仅是为了突出语法。尤其是那些没有任何语法要突出的页面实在是太过分了。
— divinedragon
126

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

http://gist.github.com

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

<div style="display:none"> content </div>
— yodaisgreen
source
花花公子，在使用了20分钟后，我感激不尽！最好的格式，没有麻烦，所有代码都放在一个地方，帖子看起来很漂亮，帖子的编辑非常容易，因为您无需将代码与帖子的其余部分混在一起，也不必担心这样做愚蠢的东西，丢失/错误格式化任何代码。谢谢男人！
— 伊利亚·索恩金
19
内嵌语言是javascript，很有可能无法搜索到。这几乎杀死了博客文章。
— 詹姆斯·摩尔
6
我目前正在使用gists，但可能会再次使用SyntaxHighlighter。要点不仅使用JavaScript（这也使它们在RSS阅读器中也无法访问），而且由于每个要点都按顺序下载而阻止了渲染，因此减慢了页面加载速度。不是一个好选择。
— Tomasz Nurkiewicz
谢谢！你让我今天一整天都感觉很好。我将分享用于向博客添加gist的以下脚本：github.com/moski/gist-Blogger
— daniel.sedlacek 2012年
1
这个想法真的很好！结果就是我想要的；格式正确的代码...但是我不会去处理它。我宁愿自己完成自己的工作。将代码（属于文章的一部分）托管在其他地方并通过js包含在内，简直就是失败！
— dade 2014年
40

该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. 将您的代码粘贴到<<<<<< >>>>>>块中。
  3. 复制所有和
  4. 在博客（或任何其他）帖子编辑器中粘贴到HTML视图。

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

— gtiwari333
source
1
我认为最简单明了的答复。只需创建一个内部CSS，就可以了。
— 里西克·玛尼
对我来说也很好。简单的解决方案
— Hasitha
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>

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

— 阿兰·奥迪（Alain O'Dea）
source
1
您的指示对我来说比其他主要答案更好。万一有人发现自己在寻找它们，这是捆绑的画笔及其别名的列表。
— Scott
13

1. 首先，备份您的Blogger模板
2. 在此之后，打开Blogger模板（在“编辑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>

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. 您可以在此处转义代码。
8. 这是<class>属性支持的语言列表。

— Mahesh Meniya
source
一个不错的链接。如果它是彩色格式，那就更好了！+1
— Gaʀʀʏ
@le_garry：谢谢，我在格式化代码段时遇到了一些问题，因此它不是彩色的。
— Mahesh Meniya 2012年
请参阅gissolved的答案。迄今为止我所见过的最好的荧光笔，它的确有颜色。
— ʀʀʏ2012年
@le_garry哦，您打算在Blogger中突出显示语法。它与颜色配合得很好。我误会你是如此考虑我的回答，我有一些悲哀的，我不得不面对一些problm ..
— 马赫什Meniya
@MaheshMeniya我遵循了您为语法syntaxhighlighter编写的所有步骤，但无法正常工作，是否还有其他多余的想法？
— AA.SC 2014年
5

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

— 丰富
source
不再工作了。
— ΕГИІИО
4

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

免费的在线C＃代码着色器

除了给C＃代码着色之外，该工具还处理所有的'<'和'>'符号，将它们转换为'＆lt;'。和'＆gt;'。制表符被转换为空格，以便在不同的浏览器中看起来相同。您甚至可以使着色器内联CSS样式，以防万一您无法或不想在博客或网站中插入CSS样式表。

— 帕维尔·弗拉多夫（Pavel Vladov）
source
3

我在由Blogger驱动的博客中使用SyntaxHighlighter。实际站点托管在我自己的服务器上，而不是Blogger托管（Blogger可以通过FTP将帖子通过ftp传输到您自己的站点），但是拥有自己的域和虚拟主机每月仅需花费几美元。

— 皮特·柯汉（Pete Kirkham）
source
同意-如果我托管自己的博客，可以有很多选择，但是当博客实际上由Blogger托管时，似乎没有太多支持。
— rbrayb
2

实际上，我已经使用了Vim（还有其他;-)）：它有一个2html的“插件”。在这里查看文档。

因此，在编辑代码时，我只是将其转换为HTML，然后将结果粘贴到Blogger的HTML编辑器中。

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

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

— Zsolt Botykai
source
1

Emacs的特定答案：就博客而言，它允许内联CSS。基于javascript的荧光笔的问题是您必须使用其配色方案或实施自己的配色方案。但是，像我一样，如果您喜欢自己的emacs配色方案，那么您可以使用更好的选择。我已经破解了emacs的“ htmlize.el”包，以添加以下四个功能...

  1. blog-htmlize-buffer
  2. blog-htmlize-region
  3. Blog-htmlize-with-linum缓冲区
  4. blog-htmlize-region-with-linum

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

这是我的博客的链接，您可以在其中找到有关如何在emacs中使用“ blog-htmlize.el”的详细信息。这也用html编码了“小于”和“大于”符号。而且，在emacs进行所有突出显示和样式设置时，您不必担心js库是否支持代码段的语言，也不必担心在Blogger中插入模板代码。

您可以在此处找到elisp文件（将文件另存为blog-htmlize.el）

— 苏吉特
source
0

我用F＃编写了自己的代码（请参阅此问题），但是它仍然不是完美的（我只做正则表达式，所以我不识别类或方法名等）。

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

当您使用仿制药时，这太可怕了！

— 本佐尔
source
0

要发布html，javascript，c＃和java，您应该将特殊字符转换为HTML代码。如'<'为&lt;和'>'对 &gt;等

将此链接代码转换器添加到iGoogle。这将帮助您转换特殊字符。

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

— Mdhar9e
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.