Question

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

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

非常感谢。

Answer 1

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

所以输入http://blogger.com，然后登录，然后发布＆gt;编辑帖子＆gt;编辑然后在那里把它放在顶部：

<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的原因。

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

然后添加<code></code>标记或<pre></pre>标记，其类名称为"prettyprint"，您甚至可以指定此类语言"prettyprint lang-html"

所以它看起来像这样

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

或者像这样

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

您放入的代码需要从＆lt;中清除HTML？和＆gt; 要执行此操作，只需将代码粘贴到此处：http://www.simplebits.com/cgi-bin/simplecode.pl

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

<强>更新现在你可以在博客中链接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>

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

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

或所谓的smallest domready曾经

和你的完成:)）

修改

作为Lim H在评论中指出，如果你使用博客动态视图（ajax模板），那么你需要使用这里描述的方法绑定自定义javascript：prettyPrint() doesn't get called on page load

更新2017-06-04

使用此处的指南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>

Answer 2

以下内容立即为我服务。

转到 Blogger＆gt;布局＆gt;修改HTML
复制以下代码段并在“{1}}后面的”编辑模板“字段中立即粘贴：

片段：

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

点击“保存模板”
转到 Blogger＆gt;发布＆gt;新帖
点击“编辑HTML”，确保您正在编辑HTML。在空字段中尝试：

<body onload='prettyPrint()'>

请注意，如果您现在点击“预览”，您将看到此代码仅为黑色。别担心（还）。
点击“发布帖子”，然后点击“查看博客”。你的代码应该被美化。

Answer 3

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

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

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

此处提供更多详细信息：http://code.google.com/p/google-code-prettify/wiki/GettingStarted

Answer 4

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

只需在标记之前在博客中添加以下javascript库。

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

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

enter image description here

现在，您已成功在博主中添加了Google代码美化。

现在，如果你想在博客帖子中插入代码，然后添加代码（html，css，php等），然后在....标签之间插入代码。

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

或

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

Demo of the google Prettify on Blogger

另请参阅此文档，以便通过以下链接将此Google美化用品添加到博客中。

how to add Syntax Highlighter For Blogger Using Google Prettify

Answer 5

在http://alexgorbatchev.com/wiki/SyntaxHighlighter查看SyntaxHightlighter 在该网站上，您还可以在blogger.com上找到有关如何使用它的说明，该网站提供了所需脚本的托管版本，因此您无需自己托管文件。

Answer 6

另一种解决方案是使用syntaxhighlighter 2.0 java脚本库。我已经在我的博客上使用它，它看起来效果很好。

这是关于它的帖子：

http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html link text

干杯。

Answer 7

不能直接回答您的问题，但值得考虑GitHub。您可以获得一个免费帐户，并获得可以在您的网页上分享和托管的"gists"语法。

缺点是该副本是在Github的网站上托管的，如果这个版本失败了，那么它也适合你。

Answer 8

提供库的cdnjs “的 SyntaxHighlighter的”

到 blogger＆gt;＆gt;模板＆gt;＆gt;编辑模板在 body 标记结束前添加以下代码并保存模板。
我给了python的例子。
您可以从cdnjs链接其他语言脚本文件。 语法高亮代码

<pre class="brush: py"> print("hello world") </pre>

其他语言去复制脚本：https://cdnjs.com/libraries/SyntaxHighlighter

 <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'/>  <script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>  <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>

Answer 9

Here是适用于我的解决方案。放入<head>...</head>动态博客HTML：

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

Answer 10

转到博客主题部分，然后点击修改HTML ..然后将Google Prettify CDN添加到HTML的head标记。

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

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

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

有关更多主题，请访问此处.. Prettify themes

创建帖子时，将编辑模式从可视化更改为 HTML ，然后转到要添加代码段的位置。然后包括这样的代码。

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

您可以通过选择相关语言html，css，php，javascript来更改代码样式...在这里，我使用了 html 代码段。

Answer 11

我想与您分享自己的方式，因为它简单易行。

转到您的博客帐户，点击theme >> customize >> Advance >> Add CSS

然后粘贴下面的CSS代码

code {
    font-family: Courier, monospace;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    border-radius: 2px;
    padding: 1px 4px;
}
pre, .mw-code {
    padding: 5px;
    font-family: Courier, monospace;
    font-size: inherit;
    line-height: 1rem;
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    padding: 1em;
    white-space: pre-wrap;
    overflow-x: hidden;
    word-wrap: break-word;
}

例如，要使事情正常工作

To check the MX record of a domain <code> nslookup </code> (in windows):<br />

<pre>temp = foo
foo = bar
bar = temp
</pre>

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

11 个答案:

更新2017-06-04