Ghost 代码美化

上次更新于 

1 使用Google-code-prettify

GitHub - googlearchive/code-prettify: An embeddable script that makes source-code snippets in HTML prettier.
An embeddable script that makes source-code snippets in HTML prettier. - googlearchive/code-prettify
GitHubgooglearchive

1.1 引入 code-prettify 的源代码

需要在文档中引入 code-prettify 的script标签，对于 ghost 来说，后台 Advanced -> Code injection -> Site header 插入如下代码：

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>

再添加主题：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/styles/sons-of-obsidian.css">

补充其他语言的支持，比如：

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/lang-lua.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/lang-sql.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/lang-proto.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/node_prettify.js"></script>

1.2 标记代码片段

code-prettify 使用 prettyprint 类来查找 <pre>、<code> 或 <xmp> 元素，并添加 <span> 来为关键字、字符串、注释和其他标记类上色。

将代码片段放入 <pre class="prettyprint">...</pre> 或 <code class="prettyprint">...</code> ，被 prettyprint 标记的标签， pretty-printed 会自动处理并打印出来。

但是，ghost 不太方便为代码框添加 "prettyprint" 类，不过可以动态为 <pre> 添加类：

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 找到所有的 <pre> 元素
    const preElements = document.querySelectorAll('pre');
    
    // 遍历每一个 <pre> 元素并添加 class
    preElements.forEach(function(pre) {
        pre.classList.add('prettyprint','linenums');//
        pre.style.overflow = 'auto';
    });

    // 初始化 Code Prettify
    prettyPrint();
});
</script>

至此，代码的美化就算基本完成了。

添加 linenums 类标记，是添加行数显示；
pre.style.overflow = 'auto'; 这个避免代码换行，式代码显得更清晰；

1.3 一些补充

  1. 添加了 "linenums" 显示代码的行数，是跳5个数显示，可以这样解决：
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
  1. 我们在黑暗模式下显示可能有点问题，如代码行显示白色的背景块，可以这样解决：
:not(pre)>code {
    background-color: #00000000;
}
  1. 顺便再压缩一下行间距：
.prettyprint ol li {
  margin-top: 0px;
}

2 使用 prismjs

Prism
Smashing Magazine

2.1 引入 Prism 的源代码

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>

补充其他语言的支持，比如：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-css.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-java.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-c.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-csharp.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-javascript.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-python.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-cpp.min.js"></script>

添加主题：

<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css" rel="stylesheet" />