Hobbies 興趣

如何使用 Prism CDN 做到程式碼高亮 Syntax highlighting

如何使用 Prism CDN 做到程式碼高亮 Syntax highlighting

MS

MS

— 5 min read
如何使用 Prism CDN 做到程式碼高亮 Syntax highlighting
Prism CDN Syntax Highlighting Cover

每当输入代码或是 Excel 函数 或是 Bash 指令分享时，总是觉得哪儿不对劲，连我自己阅读起来都需要将之粘贴到Notion等支援高亮显示的软件才能更好的理解，同时我也在思考，如果我在网站分享是不是也会照成他人的困扰呢？

PRISM Syntax Highlighting

为了让代码变得容易阅读以及理解，我决定使用最容易的方法让分享的代码以高亮显示，刚好很多人推荐Prism ：一个轻量化代码高亮显示可拓展的方案。

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.

显示效果 Prism主题：OKAIDIA

最后我觉得OKAIDIA的代码显示比较符合我的要求，有兴趣也可以到Prism Examples 试试不同主题之间的效果。先看看代码高亮的显示效果吧，第一个CSS是使用Prism之前的效果：

CSS 示範

<style>
  pre[class*="language-"] {
    margin: 0 0 1.5em !important;
  }
  code {
    text-shadow: none !important;
  }
  .token.operator {
    background: none !important;
  }
  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: #20262E !important;
  }
</style>
CSS 之前
<style>
  pre[class*="language-"] {
    margin: 0 0 1.5em !important;
  }
  code {
    text-shadow: none !important;
  }
  .token.operator {
    background: none !important;
  }
  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: #20262E !important;
  }
</style>
CSS 之后

Bash 示範

sudo apt-get dist-upgrade
Bash

JavaScript 示範

<!-- prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-javascript.min.js"></script>
javascript
=SUM(A3:A4)
excel-formula

如何在文章中插入代码？

⌨️
這裏的範例是在 Ghost 上的情況，但是即便是 WordPress 有或是其他形式的文字發佈平臺都可使用 Prism CDN，只要在 Header 以及 Footer 插入 JavaScript 代碼即可。

也许大部分使用Ghost后台写作，只是享受打字写作的快感，但是并不需要插入代码，所以可能不知道怎么插入代码，其实只要在段落的开头输入 ``` 即可，接着可别忘了填入代码名称，这样就能辨认出插入的是什么代码格式。

但是Ghost能在不安装任何东西的情况就能实现代码，https://cdnjs.com/libraries/prism，这里就是用PRISM的CDN，就像外部功能一样，当读者浏览的文章使用了相关代码，就能以PRISM主题呈现。

如何使用Prism代码注入

虽然PRISM是轻量的服务，但是不建议将所有代码给载入（与Google Font一样是从外部加载），免得网站加载变慢，就像我可能会用到的是CSS， HTML， EXCEL Javascript的话，我就只加载这些。如果网站只有几篇文章的话，也可以在Code injection中 Site Header 以及 Site Footer 将以下代码粘贴上去储存Save 即可；如果只是想在单一文章注入代码的话，在文章撰写的选项中使用Code injection中的 Post header 以及 Post footer 即可，同样的方法也适用于WordPress或是任何网站。

<!-- prism.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css"/>
Site Header
<!-- prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-bash.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-excel-formula.min.js"></script>
Site Footer

万一你有需要植入更多其他代码的话也可以CDNjs 查找再将之粘贴到 Site Footer 中。

⌨️
最重要的是方便，省時省力。

因为服务是使用外部CDN加载的，即便是网站优化的不错的话，但是CDNjs网站出现网络问题的话，多少也会影响网站的加载速度，但不影响浏览。

必要的話也可以用 CSS 自定義網站顯示程式碼的方式，又或者是用 CodePen 的服務分享程式碼。

参考：Add syntax highlighting with Prism

Read more