Ghost 比较讨厌的一点就是,各种基础东西都不存在,得通过各种方式(主要是插入代码)来添加功能……

  1. 准备工作
graph LR

A(打开 Ghost 后台管理)-->B(设置 Settings)
B-->C(代码注入 Code Injection) 

  1. 增加语法高亮 prism

语法高亮比较简单,我使用 CDNJS - prism 作为CDN源,并且使用了 prism-autoloader 来自动载入需要高亮的语法插件。

Site Footer 里插入下面代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>

如果想要改变代码高亮风格,可以在 prism-themes 里寻找中意的主题,并插入到 Site Header 里面:

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.min.css"  rel="stylesheet" />
  1. 增加图表支持 mermaid

同样是使用 CDNJS - mermaid, 不过这次代码稍微要做一下修改,因为我们已经用了 prism 来高亮语法,DOM 会被修改成 pre.language-mermaid>code.language-mermaid 状态,此时需要筛选一下DOM并替换一下样式表。

Site Header 里插入下面代码,主要是修复样式表:

<style>pre.language-mermaid {background: none;border: none;}</style>

Site Footer 里插入下面代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.4/mermaid.min.js"></script>
<script>$(document).ready(()=>{mermaid.init({}, "code.language-mermaid")});</script>

这样我们就可以很简单的在文章里插入流程图了::

    ```mermaid
    graph LR

        A(打开 Ghost 后台管理)-->B(设置 Settings)
        B-->C(代码注入 Code Injection) 

    ```