几行代码就可以让你家Ghost支持代码高亮
首先需要知道有Prism这个轻量JS库，专门用来做代码高亮，开源大法真的好！
国内，采用bootCDN作为加速服务。采用v1.19.0版本。
Prism代码注入
进到Ghost后台 > Settings > Code injection，在Site Header增加以下代码，懂基本HTML和CSS的都应该可以看懂。
<!-- prism.js -->
<link href="https://cdn.bootcss.com/prism/1.19.0/themes/prism-tomorrow.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/prism/1.19.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet">
<script>
window.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre[class*=language-]').forEach(function(node) {
node.classList.add('line-numbers');
});
Prism.highlightAll();
});
</script>
<style>
/* prism */
pre[class*="language-"] {
margin: 0 0 1.5em !important;
}
pre[class*="line-numbers"]>code {
padding: 0;
}
code {
text-shadow: none !important;
}
.token.operator {
background: none !important;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #20262E !important;
}
</style>
再到Site Footer，增加以下代码：
<!-- prism.js -->
<script defer src="https://cdn.bootcss.com/prism/1.19.0/components/prism-core.min.js"></script>
<script defer src="https://cdn.bootcss.com/prism/1.19.0/plugins/autoloader/prism-autoloader.min.js" onload="Prism.plugins.autoloader.languages_path='https://cdn.bootcss.com/prism/1.19.0/components/'"></script>
<script defer src="https://cdn.bootcss.com/prism/1.19.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script defer src="https://cdn.bootcss.com/prism/1.19.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script defer src="https://cdn.bootcss.com/prism/1.19.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
启动了以下插件：
- Prism line number，显示行号；
- Prism toolbar & copy to clipboard，显示拷贝按钮；
- Prism previewers，自动预览颜色、曲线、时间等；
- Prism autoload插件，可以根据
markdown上标注的语言，自动动态加载对应的语言库。支持的语言列表可以到https://www.bootcdn.cn/prism/1.19.0/这里Ctrl+F。
注意1：使用markdown引用代码时，一定要注意明确代码的类型，否则不会生效。
注意2：html, xml, svg, mathml需要声明为markup才能正确显示高亮。
注意3：JS需要声明为javascript才能正常显示高亮。
效果对比
// 无高亮
var code = 'hello world';
console.log(code);
// 有高亮
var code = 'hello world';
console.log(code);
