我正在使用 blogger.com 来托管一些关于编程的文本，并且我想使用Prettify（与 Stack Overflow 相同）很好地为代码示例着色。
如何将 Prettify 脚本安装到博客域中？链接到某个地方的共享副本会更好（如果确实可能的话）吗？我在不同的域上有网络空间。那会有帮助吗？
问问题
13808 次
11 回答
61
当您在 Blogger 中创建新条目时，您可以选择在条目中使用 HTML 并编辑您的博客条目。
所以输入http://blogger.com，登录，然后导航到Posting → Edit Posts → Edit。在那里把它放在顶部：
<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.
在这种情况下，因为 Blogger 不允许我们链接到样式表，所以我们只是嵌入了prettify.css内容。
然后添加<code></code>标签或<pre></pre>类名为 的标签"prettyprint"。您甚至可以指定语言，例如"prettyprint lang-html".
所以它看起来像这样：
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
或者像这样：
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
您输入的代码需要从<和清除其 HTML >。为此，只需将您的代码粘贴到此处：https ://www.freeformatter.com/html-escape.html
您可以将顶部代码放在您的 HTML 布局中，这样如果您愿意，它会默认包含在所有页面中。
截至 2012 年，您可以在 Blogger 中链接 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>
我选择不故意替换 body onload 事件。相反，我使用的是旧浏览器不支持的新 DOMContentLoaded 事件。如果您需要旧的浏览器支持，您可以使用任何其他加载事件来启动prettyPrint，例如 jQuery：
jQuery(function($){
prettyPrint();
});
或者据说是有史以来最小的domready
你完成了:)
正如Lim H在评论中指出的那样，如果您使用 Blogger 动态视图（Ajax 模板），那么您需要使用此处描述的方法来绑定自定义 JavaScript 代码：在页面加载时不会调用 prettyPrint()
使用 GitHub 上的指南：https ://github.com/google/code-prettify
基本上就用这个:)
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>
于 2009-12-15T19:34:18.160 回答
41
以下立即为我工作。
- 转到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()'>- 点击“保存模板”
- 转到Blogger > 发帖 > 新帖子
- 确保通过单击“编辑 HTML”来编辑 HTML。在空白字段中尝试：
<pre class="prettyprint">int foo=0;
NSLog(@"%i", foo);
</pre>
- 请注意，如果您现在单击“预览”，您将只看到黑色的此代码。别担心（还）。
- 单击“发布帖子”，然后单击“查看博客”。你的代码应该是美化的。
于 2010-04-23T05:14:00.177 回答
15
如今，Google Code Prettify 有一个自动加载脚本。您可以通过一个 URL 加载 JavaScript 和 CSS 进行美化。
将脚本添加到<head>您的 Blogger 模板部分，它将适用于您的所有帖子：
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
更多详细信息请参见入门。
于 2013-05-25T04:38:18.150 回答
6
在您的 Blogger 帐户中添加 Google 代码美化器非常简单。
只需在标记之前在您的 Blogger 帐户中包含以下 JavaScript 库。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
就像下图一样...
现在您已成功将 Google 代码美化器添加到您的 Blogger 帐户。
现在，如果您想在您的 Blogger 帖子中插入代码，请添加代码（HTML、CSS、PHP 等），然后在 .... 标签之间插入该代码。
<pre class="prettyprint">...</pre>
或者
<code class="prettyprint">...</code>
另请参阅此文档，以在以下链接中将此 Google 美化器添加到 Blogger。
于 2014-12-20T11:32:03.060 回答
3
在该站点上，您还可以在 blogger.com 上找到有关如何使用它的说明，并且该站点提供了所需脚本的托管版本，因此您无需自己在某个地方托管文件。
于 2009-12-05T23:17:19.670 回答
2
另一种解决方案是使用syntaxhighlighter 2.0 JavaScript 库。我在我的博客上使用过它，它似乎工作得很好。
这是一篇关于它的博客文章：
于 2010-01-01T22:46:10.677 回答
1
cdnjs提供库“ SyntaxHighlighter ”。
转到Blogger →模板→编辑模板。在body标记结束之前添加以下代码并保存模板。
我已经举了一个 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 and PHP -->
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
于 2017-02-04T07:25:29.920 回答
0
这是适合我的解决方案。添加<head>...</head>动态 Blogger HTML 的：
<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
prettyPrint();
});
</script>
于 2014-01-29T20:01:13.943 回答
0
转到 Blogger 主题部分并单击编辑 HTML。然后将对 Google Prettify CDN 的引用添加到 HTML 的 head 标记中。
然后在这个脚本下面包含一个代码片段的主题......我包括了沙漠主题。<!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style><pre class="prettyprint">
<code class="language-html">
<!-- your code snippet -->
</code>
</pre>于 2018-02-20T12:44:12.400 回答
0
我的方式很简单，而且有机动性。
转到您的 Blogger 帐户，单击主题→自定义→高级→添加 CSS。
然后粘贴下面的 CSS 代码。
code {
font-family: Courier, monospace;
color: #000;
background-color: #f8f9fa;
border: 1px solid #eaecf0;
border-radius: 2px;
padding: 1px 4px;
}
pre, .mw-code {
padding: 5px;
font-family: Courier, monospace;
font-size: inherit;
line-height: 1rem;
color: #000;
background-color: #f8f9fa;
border: 1px solid #eaecf0;
padding: 1em;
white-space: pre-wrap;
overflow-x: hidden;
word-wrap: break-word;
}
为了使事情正常进行，例如：
To check the MX record of a domain <code> nslookup </code> (in Windows):<br />
<pre>temp = foo
foo = bar
bar = temp
</pre>
于 2020-06-12T07:27:35.833 回答