我们添加代码高亮一般都是+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(/</g,"<");
code = code.replace(/>/g,">");
code = code.replace(/&/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/