如何在Blogger/BlogSpot中使用Prettify？

Question

如何在Blogger/BlogSpot中使用Prettify？

javascriptbloggershared-hostingprettify

57

我正在使用blogger.com来托管一些编程文本，并且想要使用Prettify（与 Stack Overflow 相同）来美观地着色代码示例。

如何将 Prettify 脚本安装到博客域中？如果可能的话，链接到共享副本是否更好？我在不同域上有网络空间。那有帮助吗？

- billpg

离题：你应该看看这个针对博客主的**Social Content Locker**，它真的很棒。 - craig lerr

11个回答

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>

请注意，如果现在单击“预览”，您将只看到此代码的黑色文本。暂不用担心。
单击“发布文章”，然后单击“查看博客”。您的代码应该变得美观了。

- Ken

1

目前来看，这是最好的答案，因为我们现在可以在博客中链接到CSS。 - Eric Fortin

您可以通过点击“预览”来使其工作，然后在新打开的预览选项卡中，将“https”替换为“http”（不带“s”），以允许脚本加载。 - heltonbiker

15

现在，Google Code Prettify有一个自动加载程序。您可以通过一个URL加载prettify的JavaScript和CSS。

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

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

更多的细节请查看入门指南。

- Badaro

是的！这是现在首选的方法。如果您需要比默认语言更多的语言，可以在URL末尾添加参数（?lang=css&lang=ml）以附加额外的语言处理程序。 - KyleMit

6

在您的Blogger帐户中添加Google代码美化器非常简单。

只需在您的Blogger帐户中在</head>标签之前包含以下JavaScript库即可。

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

就像下面的图片一样...

Enter image description here

现在，您已经成功地将Google代码美化器添加到您的Blogger帐户中了。

现在，如果您想在Blogger文章中插入代码，请添加代码（HTML、CSS、PHP等），并将该代码插入...标签之间。

 <pre class="prettyprint">...</pre>

或者

<code class="prettyprint">...</code>

在博客程序 Blogger 上使用 Google Prettify 的演示

此外，请参考以下链接添加此 Google Prettifier 到 Blogger 的文档。

使用 Google Prettify 为 Blogger 添加语法高亮功能

- muni

3

请查看SyntaxHightlighter。在该网站上，您还可以找到有关如何在blogger.com上使用它的说明，并且该网站提供所需脚本的托管版本，因此您无需自行托管文件。

- Jeroen-bart Engelen

2

另一个解决方案是使用syntaxhighlighter 2.0 JavaScript库。我在我的博客上使用它，效果似乎很不错。

这里有一篇关于它的博客文章： Blogger Engine的语法高亮

- CraftyFella

第一个链接似乎已经（有效地）损坏了。它重定向到另一个域名下的 *Alex Gorbatchev And gogopdf Turn Raw Javascript To A PDF Service*。完全不清楚那是否是原始内容（它提到了语法高亮，但不清楚这是否是原始意图）。 - Peter Mortensen

1

这不是直接回答你的问题，但值得考虑GitHub。你可以获得免费帐户并获取语法着色的"gists"，这些内容可以在你的网页上分享和托管。

缺点是复制品托管在GitHub的网站上，如果它挂了，那么你也无法访问。

- Jeff Foster

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>

- anjaneyulubatta505

0

这里是适合我的解决方案。将以下代码添加到动态Blogger HTML的<head>...</head>中：

<script>
    $(window.blogger.ui()).on('viewitem', function (event, post, element) {
        prettyPrint();
    });
</script>

- Artur A

0

前往Blogger主题部分，单击编辑HTML。然后，在HTML的head标签中添加对Google Prettify CDN的引用。

然后在此脚本下方包含代码片段的主题...我包括了沙漠主题。

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

更多主题，请访问这里。 [美化主题][1]

当您创建一个帖子时，将编辑模式从可视化切换到**HTML**，然后转到要添加代码片段的位置。然后像这样包含代码。

<pre class="prettyprint">
  <code class="language-html">
      <!-- your code snippet -->
  </code>
</pre>

你可以通过选择相关的语言HTML、CSS、PHP、JavaScript等来更改代码风格。这里我使用了一个**HTML**代码片段。

[1]: http://www.compromath.com/2017/02/adding-specific-code-syntax-highlighter.html

- user7090620

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Timo Huovinen · Accepted Answer

当您在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用作事件处理程序。这会导致混乱（有关详细信息，请参见自述文件）。这就是为什么我们传递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事件。如果您需要旧浏览器支持，可以使用任何其他加载事件来启动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>