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

Code 代码 2020年2月4日 ~

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

大道至简,行者无疆。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.