几行代码就可以让你家Ghost支持代码高亮

Code 代码 2月 04, 2020 ~

首先需要知道有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);

相关链接

标签

Jerry

大道至简,行者无疆。