如何使用blogger / blogspot进行美化？

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

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

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?

如何将美化脚本安装到博客域中？在某处链接到共享副本会更好（如果确实可能）吗？我在不同的域上有网站空间。那会有帮助吗？

Many thanks.

非常感谢。

10 个解决方案

#1

When you make a new entry in blogger, you get the option to use HTML in your entry and to edit your blog entries.

当您在博客中创建新条目时，您可以选择在条目中使用HTML并编辑博客条目。

so type http://blogger.com , then login, then Posting>Edit Posts>Edit then in there put this at the top:

所以键入http://blogger.com，然后登录，然后发布>编辑帖子>编辑然后将其放在顶部：

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

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.

请注意，您不应该直接使用prettyPrint作为事件处理程序，它会使它混淆（有关详细信息，请参阅自述文件）。这就是为什么我们传递addLoadEvent一个函数，然后转向并调用prettyPrint。

In this case because blogger does not allow us to link to the stylesheet, we just embed the prettify.css contents.

在这种情况下，因为博客不允许我们链接到样式表，我们只是嵌入了prettify.css内容。

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"

然后添加一个标签或一个类名为“prettyprint”的

 
  
  标签，你甚至可以指定这样的语言“prettyprint lang-html”

so it can look like this

所以它看起来像这样

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

or like this

或者像这样

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

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才能执行此操作，只需将代码粘贴到此处：http：//www.simplebits.com/cgi-bin/simplecode.pl

you can put the top code in your HTML layout so that its included for all pages by default if you like.

您可以将顶部代码放在HTML布局中，以便默认情况下将其包含在所有页面中（如果您愿意）。

update Now you can link CSS files in blogger, so adding this to the <head> should be enough

更新现在您可以在博客中链接CSS文件，因此将此添加到就足够了

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

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:

我选择不故意替换body onload事件，而是使用旧浏览器不支持的新DOMContentLoaded事件，如果你需要旧的浏览器支持，你可以使用任何其他load事件来启动prettyPrint，例如jQuery的：

jQuery(function($){
    prettyPrint();
});

or the supposedly smallest domready ever

或者所谓的最小的domready

and your done :)

和你完成:)

Edit:

编辑：

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

正如Lim H在评论中指出的，如果您使用博客动态视图（ajax模板），那么您需要使用此处描述的方法来绑定自定义javascript：在页面加载时不会调用prettyPrint（）

Update 2017-06-04

Use the guide here https://github.com/google/code-prettify

请使用https://github.com/google/code-prettify上的指南

Basically just use this :)

基本上只是用这个:)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>

#2

The following worked for me immediately.

以下为我立即工作。

Go to Blogger > Layout > Edit HTML
转到Blogger>布局>编辑HTML
Copy the following snippet and paste it immediately after <head> in the "Edit template" field:
复制以下代码段并立即将其粘贴到“编辑模板”字段中的之后：

snippet:

片段：

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

After </head> replace <body> with <body onload='prettyPrint()'>
在之后用替换
Click "SAVE TEMPLATE"
点击“保存模板”
Go to Blogger > Posting > New Post
转到Blogger>发布>新帖子
Make sure you're editing the HTML by clicking on "Edit HTML." In the empty field try:
确保通过单击“编辑HTML”来编辑HTML。在空场中尝试：

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

 int foo = 0; NSLog（@“％i”，foo）;

Notice if you click "Preview" now you'll see this code in black only. Don't worry (yet).
请注意，如果您现在单击“预览”，您将看到此代码仅为黑色。别担心（还）。
Click "PUBLISH POST" and then "VIEW BLOG". Your code should be prettified.
单击“发布POST”，然后单击“查看博客”。你的代码应该被美化。

#3

Nowadays, Google-Code-Prettify has an Auto-Loader script. You can load the JavaScript and CSS for prettify via one URL.

如今，Google-Code-Prettify有一个Auto-Loader脚本。您可以通过一个URL加载JavaScript和CSS以进行美化。

Add the script to the <head> section of your Blogger template and it will work on all your posts:

将脚本添加到Blogger模板的部分，它将适用于您的所有帖子：

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

More detail here: http://code.google.com/p/google-code-prettify/wiki/GettingStarted

有关详细信息，请访问：http：//code.google.com/p/google-code-prettify/wiki/GettingStarted

#4

It's very simple to add google code prettifier in your blogger.

在博客中添加谷歌代码美化非常简单。

just include the below javascript library in your blogger just before tag.