如何使用blogger / blogspot进行美化？ [英] How to use prettify with blogger/blogspot?

问题描述

我正在使用blogger.com来托管一些关于编程的文本，我想使用美化（与stackoverflow相同）来很好地为代码示例着色。

I'm using blogger.com to host some texts on programming, and I'd like to use prettify (same as stackoverflow) to nicely colour the code samples.

如何将美化脚本安装到博客域中？

在某处链接到共享副本会更好（如果确实可能）？

我有网络空间一个不同的领域。那会有帮助吗？

How do I install the prettify scripts into the blog domain?
Would it be better (if indeed its possible) to link to a shared copy somewhere?
I have webspace on a different domain. Would that help?

非常感谢。

推荐答案

当你在新的条目中博主，您可以选择在条目中使用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 直接作为事件处理程序，它会让人感到困惑（参见自述文件了解详情）。这就是为什么我们传递 addLoadEvent 这个函数然后转身并调用 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.

然后添加< code>< / code> 代码或< pre>< / pre> 代码类名prettyprint，你甚至可以指定这样的语言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.

更新
现在您可以在博客中链接CSS文件，
so将此添加到< 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>

我选择不故意替换正文onload事件，而是使用新的DOMContentLoaded事件旧的浏览器不支持，如果你需要旧的浏览器支持，你可以使用任何其他加载事件来启动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 在评论中指出，如果您使用博客动态视图（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进行美化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！