如何使用博客/ blogspot美化？
我正在使用blogger.com在编程上托pipe一些文本，并且我想使用美化（与stackoverflow相同）来很好地为代码示例着色。
如何将美化脚本安装到博客域中？
链接到某个地方的共享副本是否会更好（如果确实有可能）？
我有一个不同的域的web空间。 会有帮助吗？
非常感谢。
当您在博主中创build新条目时，您可以select在条目中使用HTML并编辑您的博客条目。
所以键入http://blogger.com ，然后login，然后发布>编辑post>编辑然后在那里把这个在顶部：
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { prettyPrint(); }); </script> <style type="text/css"> /* Pretty printing styles. Used with prettify.js. */ .str { color: #080; } .kwd { color: #008; } .com { color: #800; } .typ { color: #606; } .lit { color: #066; } .pun { color: #660; } .pln { color: #000; } .tag { color: #008; } .atn { color: #606; } .atv { color: #080; } .dec { color: #606; } pre.prettyprint { padding: 2px; border: 1px solid #888; } @media print { .str { color: #060; } .kwd { color: #006; font-weight: bold; } .com { color: #600; font-style: italic; } .typ { color: #404; font-weight: bold; } .lit { color: #044; } .pun { color: #440; } .pln { color: #000; } .tag { color: #006; font-weight: bold; } .atn { color: #404; } .atv { color: #060; } } </style> 请注意，您不应该直接将prettyPrint作为事件处理程序使用，它会将其混淆（请参阅自述文件以了解详细信息）。 这就是为什么我们要传递addLoadEvent函数，然后转过来调用prettyPrint 。
在这种情况下，因为博主不允许我们链接到样式表，我们只是embedded了prettify.css的内容。
然后添加类名为"prettyprint"的<code></code>标签或<pre></pre>标签，甚至可以指定这样的语言"prettyprint lang-html"
所以它可以看起来像这样
<pre class="prettyprint lang-html"> <!-- your code here--> </pre>
或者像这样
<code class="prettyprint lang-html"> <!-- your code here--> </code>
您input的代码需要从<和>中清除HTML，然后将代码粘贴到此处： http : //www.simplebits.com/cgi-bin/simplecode.pl
你可以把最好的代码放到你的HTML布局中，这样，如果你愿意，它可以默认包含在所有的页面中。
更新现在你可以在博客中链接CSS文件，所以把它添加到<head>就足够了
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function() { prettyPrint(); }); </script>
我select不是故意replacebody onload事件，而是使用旧浏览器不支持的新DOMContentLoaded事件，如果您需要旧的浏览器支持，则可以使用任何其他加载事件来启动prettyPrint，例如jQuery的：
jQuery(function($){ prettyPrint(); });
或者有史以来最小的domready
和你做的:)
编辑：
正如Lim H在评论中指出的，如果您使用博客dynamic视图（ajax模板），那么您需要使用此处描述的方法绑定自定义javascript： prettyPrint（）不会在页面加载时调用
更新2017-06-04
在这里使用指南https://github.com/google/code-prettify
基本上只是用这个:)
<script src="ajax/libs/prettify/r298/run_prettify.min.js"></script> <pre class="prettyprint"><code class="language-css">...</code></pre>
以下为我立即工作。
- 转到Blogger>布局>编辑HTML
- 复制下面的代码片段，并在“编辑模板”字段中的
<head>之后立即粘贴：
片段：
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
- 在
</head><body>用<body onload='prettyPrint()'>replace<body><body onload='prettyPrint()'> - 点击“保存模板”
- 转到Blogger>发帖>新post
- 确保您通过点击“编辑HTML”来编辑HTML。 在空白的领域尝试：
<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>
- 注意，如果你现在点击“预览”，你会看到只有黑色的代码。 不要担心（还）。
- 点击“PUBLISH POST”，然后点击“VIEW BLOG”。 你的代码应该是美化的。
目前，Google-Code-Prettify有一个Auto-Loader脚本。 您可以通过一个URL加载JavaScript和CSS来进行优化。
将脚本添加到Blogger模板的<head>部分，该脚本将适用于您的所有post：
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
此处详细了解： http ： //code.google.com/p/google-code-prettify/wiki/GettingStarted
在您的博客中添加Google代码优化器非常简单。
只需在标记之前在您的博客中包含下面的JavaScript库。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
就像下面的图片一样
现在，您已成功将Google代码美化器添加到您的博客中。
现在，如果你想在你的博客post中插入代码，然后添加代码（HTML，CSS，PHP等），然后插入….代码之间的代码。
<pre class="prettyprint">...</pre>
要么
<code class="prettyprint">...</code>
谷歌美化在Blogger上的演示
另请参阅此文档以在下面的链接中将此Google美化器添加到博主。
如何使用Google Prettify为Blogger添加语法突出显示
看看http://alexgorbatchev.com/wiki/SyntaxHighlighter的; SyntaxHightlighter在这个网站上，你也可以find关于如何在blogger.com上使用它的说明，这个网站提供了一个托pipe版本的必需脚本，所以你不需要需要自己托pipe文件。
另一个解决scheme是使用syntaxhighlighter 2.0 java脚本库。 我已经在我的博客上使用它，似乎工作得很好。
这里有一个关于它的文章：
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html 链接文字
干杯。
不是你的问题的直接答案，但值得考虑GitHub 。 你可以得到一个免费的帐户，并获得语法颜色的“gists” ，你可以共享和主机在您的网页上。
不足之处在于副本托pipe在Github的网站上，如果发生这种情况，那么对您也是如此。
cdnjs提供库“ SyntaxHighlighter ”
得到博客>>模板>>编辑模板添加下面的代码刚刚结束的身体标记和保存模板。
我已经给python的例子。
您可以链接cdnjs中的其他语言脚本文件。 语法高亮代码
<pre class="brush: py"> print("hello world") </pre>
对于其他语言去和复制脚本： https ： //cdnjs.com/libraries/SyntaxHighlighter
<!-- syntax highlighter--> <link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/> <!-- for python --> <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/> <!-- include other languages like javascript, php --> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
这是适合我的解决scheme。 放入dynamic博客HTML的<head>...</head> ：
<script> $(window.blogger.ui()).on('viewitem', function (event, post, element) { prettyPrint(); }); </script>
