首页 文章

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

提问于
浏览
263

我的博客托管在Blogger上,我经常在 C / C# / Java / XML 等中发布代码段,但我发现该代码段为"mangled" .

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

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

Edit: 对于@Rich答案,网站声明“要在您的网站上显示格式化代码,您需要获取此CSS样式表,并在页面的 <head> 部分添加对它的引用” . 那个's the problem - you can't在Blogger AFAIK上做到这一点 .

16 回答

  • 0

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

    这是我的博文:

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

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

  • 0

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

  • 2

    1. 首先,备份您的博主模板
    2. 之后打开博客模板(在编辑HTML模式下)并复制 </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> 属性支持的语言列表 .

  • 12

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

    • blog-htmlize-buffer

    • blog-htmlize-region

    • blog-htmlize-buffer-with-linum

    • blog-htmlize-region-with-linum

    这些函数将在emacs的新缓冲区中输出copy-paste ready html(内联样式),您可以直接在博客文章中使用 . 输出看起来与您在emacs中看到的代码完全相同(包括颜色方案) .

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

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

  • 3

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

  • 15

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

    http://gist.github.com

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

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

    使用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标记允许您在其中放置几乎任何代码而不必担心实体转义或其他典型的代码博客烦恼 .

  • 244

    看起来SyntaxHighlighter 2.0已经有了一些变化,这使得它更容易与Blogger一起使用 .

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

  • 6

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

    Free Online C# Code Colorizer

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

  • 55

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

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

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

  • 113

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

  • 3

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

  • 35

    我在F#中自己编写了(请参阅this问题),但它仍然不能识别类或方法名称等 . ) .

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

    当你有泛型时,这太可怕了!

  • 3

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

    How to use :

    • 在文本编辑器中粘贴此代码段,

    • 将您的代码粘贴在<<<<<< >>>>>>块中 .

    • 全部复制和

    • 粘贴到博客(或任何其他)帖子编辑器中的HTML视图 .

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

  • 1

    实际上我曾经使用过(还有什么;-))Vim:它有一个2html "plugin" . 见the docs here .

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

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

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

  • 6

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

相关问题