如何在Blogger/BlogSpot中使用Prettify? [英] How can I use Prettify with Blogger/BlogSpot?
问题描述
我正在使用blogger.com托管有关编程的一些文本，并且我想使用美化(与Stack溢出相同)以很好地为代码样本着色.
I'm using blogger.com to host some texts on programming, and I'd like to use Prettify (same as Stack Overflow) to nicely colour the code samples.
如何将Prettify脚本安装到博客域中? 在某个地方链接到共享副本会更好(如果确实可行)吗? 我在其他域上有网站空间.有帮助吗?
How do I install the Prettify scripts into the blog domain? Would it be better (if indeed it's possible) to link to a shared copy somewhere? I have webspace on a different domain. Would that help?
推荐答案
在Blogger中创建新条目时，您可以选择在条目中使用HTML并编辑博客条目.
When you make a new entry in blogger, you get the option to use HTML in your entry and to edit your blog entries.
因此键入 http://blogger.com ，然后登录，然后发布>编辑帖子>编辑 然后将其放在顶部:
so type http://blogger.com , then login, then Posting>Edit Posts>Edit then in there put this at the top:
<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 用作事件处理程序，否则会造成混淆(请参阅
Note that you shouldn't use prettyPrint directly as an event handler, it confuses it (see the readme for details). Which is why we're passing addLoadEvent a function that then turns around and calls prettyPrint.
在这种情况下，由于博客不允许我们链接到样式表，因此我们仅嵌入prettify.css内容.
In this case because blogger does not allow us to link to the stylesheet, we just embed the prettify.css contents.
然后添加类名称为"prettyprint"的<code></code>标记或<pre></pre>标记，您甚至可以指定这样的语言"prettyprint lang-html"
then add a <code></code> tag or a <pre></pre> tag with the class name of "prettyprint", you can even specify the language like this "prettyprint lang-html"
所以它看起来像这样
<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>
或类似的
<code class="prettyprint lang-html">
<!-- your code here-->
</code>
您输入的代码需要将其HTML清除为<和> 为此，只需将您的代码粘贴到以下位置: http://www. simplebits.com/cgi-bin/simplecode.pl
the code that you put in needs to have its HTML cleaned from < and > to do this just paste your code in here: http://www.simplebits.com/cgi-bin/simplecode.pl
您可以将顶部代码放在HTML布局中，以便在需要时默认将其包含在所有页面中.
you can put the top code in your HTML layout so that its included for all pages by default if you like.
更新
现在，您可以在Blogger中链接CSS文件，
因此将其添加到<head>就足够了
update
Now you can link CSS files in blogger,
so adding this to the <head> should be enough
<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事件，如果需要旧浏览器支持，则可以使用任何其他load事件来启动prettyPrint ，例如jQuery:
I chose not to replace the body onload event on purpose, instead I'm using the new DOMContentLoaded event that the old browsers don't support, if you need old browser support, you can use any other load event to initiate prettyPrint, for example jQuery:
jQuery(function($){
prettyPrint();
});
或所谓的最小的domready
和您完成的事情:)
如评论中指出的 Lim H 所述，以防在您使用Blogger动态视图(ajax模板)的情况下)，则需要使用此处描述的方法来绑定自定义javascript: prettyPrint()不会在页面加载时被调用
as Lim H pointed out in the comments, in case where you use the blogger dynamic views (ajax templates) then you need to use the method described here to bind custom javascript: prettyPrint() doesn't get called on page load
在此处使用指南 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>
这篇关于如何在Blogger/BlogSpot中使用Prettify?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
