让 Ghost 不通过加载 js 文件来实现代码高亮

我们添加代码高亮一般都是＋css ＋js来实现的，不过么我们既然是使用 Ghost，基于 Node.js ，我们在后台用 Markdown 书写内容，然后 Ghost 将 markdown 转为 html 代码。如果在 markdown 转为 html 这个过程中调用 prism.js 处理代码片段，那生成页面只需有 CSS 样式就可实现高亮，不用引用JS文件。

安装 Prism

进入我们的 Ghost 目录，npm 安装一下 Prism，国内服务器可以使用 cnpm。

cd /data/wwwroot/mf8
npm install prismjs  

之后node_modules文件夹下会出现prismjs目录。然后我们从 Prism 官方下载支持所有语言的 js 文件覆盖 node_modules/prismjs/prism.js 。
然后将 css 文件上传到相关css目录，或者直接写到 main.css 里面。

{{# if post}}
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />  
{{/if}}

修改 Ghost

一、修改 /node_modules/showdown-ghost/src/showdown.js 文件。
大约在 1029 行，找到

if (language && !language.match('^language-')) {
            language = 'language-' + language;
          }

修改为，

          if (language && !language.match('^language-')) {
            language = 'language-' + language;
          }
        var className = language.split("-")[1].toLowerCase();
        var grammar = Prism.languages[className];
        codeblock = Prism.highlight(codeblock, grammar, className);*/

二、修改 /node_modules/showdown-ghost/src/extensions/highlight.js 文件。大约在 54 行。

                        return codeExtractions[y];
                    });

                    return text;

中间，也就是 return text; 上添加：

                    var regex = /<pre><code class="(.*?)">([\s\S]*?)<\/code><\/pre>/g;
                    var result;
                    var Prism = require('prismjs') ;
                    while ((result = regex.exec(text)) !== null) {
                        // get the extracted class name and code
                        var className = result[1];
                        var code      = result[2];
                        
                        // lower case the class name so case does not matter
                        className = className.toLowerCase();
                        
                        // dencode HTML entities encoded by showdown
                        // the opposite of replacements taken from showdown's _EncodeCode
                        code = code.replace(/&lt;/g,"<");
                        code = code.replace(/&gt;/g,">");
                        code = code.replace(/&amp;/g,"&");
            
                      
                        // highlight the code with prism
                        // get the grammar (language supported by prism) from the class name
                        var grammar = Prism.languages[className];
                        
                        if (!grammar) {
                            // the given class name is not a language supported by prism
                            // skip to the next code block
                            continue;
                        }
                        
                        // the class name is a valid language
                        var language = className;
                        
                        // do the highlighting
                        var highlightedCode = Prism.highlight(code, grammar, language);
                        
                        // create the new HTML with the highlighted code and language class
                        // Prism moves the language class from the <code> element to the <pre> element
                        //  so we will set the class on the <pre> element
                        var newHTML = '<pre class="language-' + language + '"><code class="language-' + language +'">' + highlightedCode + '</code></pre>';
                        
                        
                        // replace the old HTML with the new HTML
                        var oldHTML      = result[0];
                        var oldHTMLIndex = result.index;
                        
                        var beforeOldHTML = text.substring(0, oldHTMLIndex);
                        var afterOldHTML  = text.substring(oldHTMLIndex + oldHTML.length);
                        text = beforeOldHTML + newHTML + afterOldHTML;}

完成

重启 Ghost 后，有代码的文件需要重新发布一下完成重新渲染的过程。这样我们就不需要再加载 js 文件就完成了代码高亮的渲染。

本文参考：https://www.denpe.com/ghost-markdown-prismjs-code-highlight/ 并加以完善。
来自：https://www.mf8.biz/archives/13/