文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Blogger/BlogSpot中使用Prettify？

问如何在Blogger/BlogSpot中使用Prettify？
EN

Stack Overflow用户

提问于 2009-12-05 23:54:04

回答 11查看 13.7K关注 0票数 57

我正在使用blogger.com来托管一些关于编程的文本，并且我想使用Prettify (与Stack和Overflow相同)来很好地为代码样本着色。

如何将美化脚本安装到博客域中？链接到某个地方的共享副本是否更好(如果确实有可能)？我在不同的域上有网络空间。这会有帮助吗？

javascript

blogger

shared-hosting

prettify

回答 11

Stack Overflow用户

回答已采纳

发布于 2009-12-16 03:34:18

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

因此，输入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>

请注意，您不应该直接使用prettyPrint作为事件处理程序。它把它搞混了(详情请看the readme )。这就是为什么我们要向addLoadEvent传递一个函数，该函数会转过头来调用prettyPrint。

在本例中，因为Blogger不允许我们链接到样式表，所以我们只嵌入了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>

您放入的代码需要从<和>中清除其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事件。如果您需要旧的浏览器支持，您可以使用任何其他load事件来启动prettyPrint，例如jQuery：

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

或者是所谓的smallest domready

这样就完成了:)

正如Lim H在评论中指出的那样，在使用Blogger动态视图(Ajax模板)的情况下，您需要使用这里描述的方法来绑定自定义JavaScript代码：

请使用GitHub：上的指南

基本上只需使用以下内容:)

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

票数 61

Stack Overflow用户

发布于 2010-04-23 13:14:00

下面的方法立即对我起到了作用。

转到Blogger >布局>编辑
复制以下代码片段，并将其立即粘贴到“编辑模板”字段中的<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>

用<body onload='prettyPrint()'>

Click“
”替换</head>后的<body>
转到博客>发布>新帖子
通过单击“编辑
”来确保您正在编辑</head>。在空白字段中尝试：

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

注意，如果你点击“预览”，现在你只会看到这段代码是黑色的。别担心。
点击“发布帖子”，然后点击“查看博客”。您的代码应该美化。

票数 41

Stack Overflow用户

发布于 2013-05-25 12:38:18

现在，Google Code Prettify有一个自动加载器脚本。你可以通过一个网址加载JavaScript和CSS来进行美容。

将脚本添加到您的Blogger模板的<head>部分，它将在您的所有帖子上工作：

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

更多细节在上。

票数 15

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1852537

复制

相似问题

问如何在Blogger/BlogSpot中使用Prettify？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Blogger/BlogSpot中使用Prettify？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Blogger/BlogSpot中使用Prettify？
EN