笔者准备好了一些常用主题:

即便如此,如果我们要替换样式,可以去 prismjs.com 重新下载JS/CSS,然后自行上传CDN用于后续的 code injection。

配置

我们打开ghost设置,选择 code injection :

在 Site Header 插入:

<!-- prism.css prism-coy.css prism-night.css prism-ocodia.css prism-solarized.css -->
<link rel="stylesheet" href="https://unpkg.com/@nuage/prism@1.0.9/umd/prism-ocodia.css">
<style>
    pre[class*=language-] {
       font-size: 13px;
       border: none;
    }
    .line-numbers-rows {
       opacity: 0.6;
    }
</style>

在 Site Footer 插入:

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

<!-- prism.css prism-coy.css prism-night.css prism-ocodia.css prism-solarized.css -->
<script src="https://unpkg.com/@nuage/prism@1.0.9/umd/prism-ocodia.js"></script>

笔者对其他主题做了注释,需要替换主题,只需将 prism.js 和 prism.css 替换为注释中的路径即可。

设置结束之后,刷新页面即可预览。