如何将 Prettify 与 Blogger/BlogSpot 一起使用？

夕色琉璃 2024-08-20 18:49:00

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

因此，输入 http://blogger.com，登录并导航到发帖 → < em>编辑帖子 → 编辑。将其放在顶部：

<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" 的标记或

标记。您甚至可以指定语言，例如“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 文件，因此将其添加到应该就足够了：

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

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

So type http://blogger.com, log in, and navigate to Posting → Edit Posts → Edit. 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>

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.

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

Then add a <code></code> tag or a <pre></pre> tag with the class name of "prettyprint". You can even specify the language like "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: https://www.freeformatter.com/html-escape.html

You can put the top code in your HTML layout, so that it’s included for all pages by default if you like.

As of 2012, you can link CSS files in Blogger, so adding this to the <head> should be enough:

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

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

Or the supposedly smallest domready ever

And you're done :)

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 code: prettyPrint() doesn't get called on page load

Use the guide at GitHub: 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>

回复收藏 0 原文

鯉魚旗 2024-08-20 18:49:00

以下内容立即对我有用。

转到Blogger >布局>编辑 HTML
复制以下代码段并将其粘贴到“编辑模板”字段中的之后：

代码段

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

：替换之后和
单击“保存模板”
转到 Blogger >发帖>新帖子
确保您通过点击“编辑 HTML”来编辑 HTML。在空字段中尝试：


int foo=0;
NSLog(@"%i", foo);

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

The following worked for me immediately.

Go to Blogger > Layout > Edit 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
Make sure you're editing the HTML by clicking on "Edit HTML." In the empty field try:

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

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.

回复收藏 0 原文

云淡月浅 2024-08-20 18:49:00

如今，Google Code Prettify 有一个自动加载脚本。您可以通过一个 URL 加载用于美化的 JavaScript 和 CSS。

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

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

更多详细信息请参见入门。

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

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

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

More detail is on Getting Started.

回复收藏 0 原文

￠好甜 2024-08-20 18:49:00

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

只需在您的 Blogger 帐户中的标记之前添加以下 JavaScript 库即可。

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

就像下图一样...

在此处输入图像描述

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

现在，如果您想在 Blogger 帖子中插入代码，请添加代码（HTML、CSS、PHP 等），然后将该代码插入到 .... 标记之间。

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

或

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

Blogger 上的 Google Prettify 演示

另请参阅以下链接中的文档，了解如何将此 Google 修饰器添加到 Blogger。

使用 Google Prettify 的 Blogger 语法荧光笔

It's very simple to add the Google Code prettifier in your Blogger account.

Just include the below JavaScript library in your Blogger account just before tag.

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

Just like in the below picture...

Enter image description here

Now you have successfully added the Google Code prettifier to your Blogger account.

Now if you want to insert code in your Blogger post, add code (HTML, CSS, PHP and etc.), and insert that code between .... tags.

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

or

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

Demo of the Google Prettify on Blogger

Also please refer to this documentation for adding this Google prettifier to Blogger in the following link.

Syntax Highlighter For Blogger Using Google Prettify

回复收藏 0 原文

超可爱的懒熊 2024-08-20 18:49:00

看看 SyntaxHightlighter。

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

回复收藏 0 原文

遮云壑 2024-08-20 18:49:00

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

这是一篇关于它的博客文章：

语法突出显示使用 Blogger 引擎

回复收藏 0 原文

云朵有点甜 2024-08-20 18:49:00

这不是对您问题的直接答案，但值得考虑 GitHub。您可以获得一个免费帐户并获得带有“gists”颜色的语法，您可以在网页上共享和托管该语法。

缺点是该副本托管在 GitHub 网站上，如果该网站出现故障，那么您也将出现故障。

回复收藏 0 原文

醉酒的小男人 2024-08-20 18:49:00

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>

cdnjs is providing the library "SyntaxHighlighter".

Go to Blogger → Template → Edit template. Add the below code just before the ending of the body tag and save the template.

I have given a example for Python.

You can link the other language script files from cdnjs.

Syntax highlight code

<pre class="brush: py">
    print("Hello, World!")
</pre>

For other languages, go and copy the script: 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>

回复收藏 0 原文

ま昔日黯然 2024-08-20 18:49:00

这里是适合我的解决方案。在动态 Blogger HTML 的 ... 中添加：

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

Here is the solution that works for me. Add in the <head>...</head> of the dynamic Blogger HTML:

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

回复收藏 0 原文

岁月蹉跎了容颜 2024-08-20 18:49:00

转到 Blogger 主题部分，然后单击“编辑 HTML”。然后将对 Google Prettify CDN 的引用添加到 HTML 的 head 标记中。

Then include a theme for code snippet below this script...I included the Desert theme.

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

For more themes, visit here..
[Prettify themes][1]

When you create a post, change the edit mode from visual to **HTML** and go to the place where you are going to add the code snippet. Then include the code like this.

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

You can change the code style by selecting relevant languages HTML, CSS, PHP, JavaScript, etc. Here I used an **HTML** code snippet.

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

Go to the Blogger theme section and click on edit HTML.. Then add a reference to the Google Prettify CDN to the head tag of the HTML.

Then include a theme for code snippet below this script...I included the Desert theme.

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

For more themes, visit here..
[Prettify themes][1]

When you create a post, change the edit mode from visual to **HTML** and go to the place where you are going to add the code snippet. Then include the code like this.

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

You can change the code style by selecting relevant languages HTML, CSS, PHP, JavaScript, etc. Here I used an **HTML** code snippet.

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

回复收藏 0 原文

哭了丶谁疼 2024-08-20 18:49:00

我的方法简单，有机动性。

转到您的 Blogger 帐户，点击主题 → 自定义 → 高级 → 添加 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>

My way is simple and has mobility.

Go to your Blogger account click Theme → Customize → Advanced → Add CSS.

Then paste the below CSS code.

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 make things work, for example:

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

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

回复收藏 0 原文

如何将 Prettify 与 Blogger/BlogSpot 一起使用？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如何将 Prettify 与 Blogger/BlogSpot 一起使用？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（11）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。