引子

Prism 是一个轻量级的、可扩展的语法高亮工具，在构建时考虑到了现代 Web 标准。它被用于数百万个网站，包括您每天访问的一些网站。

技术博客怎么少得了代码呢？为了保护读者的眼睛，代码高亮是必不可少的，但 Ghost 博客并没有自带的代码高亮功能。不过我们可以用 Prism.js 手动添加这个功能。Ghost 官方也给出了对应的指引：Tutorial: A complete guide to code samples in Ghost

在本指南中，我将展示如何将代码示例添加到您的 Ghost 站点，以及如何使用代码语法高亮显示对其进行自定义。

引入 Prism.js

在「Code injection」的「Site Header」中添加 Prism.js 的样式表：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" />

在「Site Footer」中添加 Prism.js 的脚本：

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

至此代码高亮已经可用。

添加自己常用的语言

2022 年 1 月 16 日更新

Prism.js 默认配置仅包含 Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS 这几种语言的高亮规则，如果你常用的语言不在内，则需要自己手动添加。

在 https://cdnjs.com/libraries/prism 搜索自己需要的语言，添加进 Site Footer 中 prism.min.js 的后面即可。

我添加了 Bash 和 json 的支持。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/components/prism-bash.min.js" integrity="sha512-ZqfG//sXQwAA7DOArFJyMmZQ3knKe+0ft3tPQZPvDPJR04IatmhVO5pTazVV+fLVDYSy28PhoBeUj5wxGRiGAA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/components/prism-json.min.js" integrity="sha512-QXFMVAusM85vUYDaNgcYeU3rzSlc+bTV4JvkfJhjxSHlQEo+ig53BtnGkvFTiNJh8D+wv6uWAQ2vJaVmxe8d3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

进阶配置

默认的主题有点丑，来改造一下。

就像 Ghost 主题的其余部分一样，代码块可以使用标准 CSS 和 JavaScript 进行完全自定义。

Prism.js 库附带了一个广泛的主题和插件列表，以进一步自定义您的代码示例的外观。

更换主题

更改为 Tomorrow Night 主题，其余主题可以在Prism.js 官网找到：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" />

自建主题

从 Ghost 官网抄来的，我觉得比 Tomorrow Night 主题好看，目前本站用的就是这个。 在「Site Header」中添加样式：

<style>
    pre[class*=language-] {
        background: #202328;
        border-radius: 8px;
        color: #fff;
        font-size: 1.3rem;
        line-height: 1.8em;
        max-width: 100%;
        overflow: auto;
        padding: 2.4rem 3.2rem;
        width: 100%;
    }
</style>

复制按钮

在「Site Header」中添加工具栏：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/toolbar/prism-toolbar.min.css" />

在「Site Footer」中添加工具栏和复制组件：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/toolbar/prism-toolbar.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

显示行号

在「Code injection」的「Site Footer」中添加：

<script>
window.addEventListener('DOMContentLoaded', (event) => {

document.querySelectorAll('pre[class*=language-]').forEach(function (node) {
            node.classList.add('line-numbers');
        });
        Prism.highlightAll();
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js"></script>

行内代码样式更改

2022 年 1 月 16 日更新

这个东西就是行内代码.

Casper 自带的行内代码样式不太好看，换掉。

从语雀那里抄来的：

<style>
    .gh-content :not(pre)>code {
        display: inline-block;
        font-family: var(--font-mono);
        background-color: #F5F5F5;
        border-radius: 4px;
        border: 1px solid #F0F0F0;
        padding: 0 6px;
        margin: 1px 6px;
        line-height: 1.1;
        color: #096DD9;
    }
</style>

后记

正如上文所说，Prism.js 还有很多各式各样花里胡哨的功能，感兴趣的可以研究下 Prism.js 官网 的内容。

参考文献

Prism.js - Prism.js

Tutorial: A complete guide to code samples in Ghost - Ghost