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

PRISM

为了让代码变得容易阅读以及理解,我决定使用最容易的方法让分享的代码以高亮显示,刚好很多人推荐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之前的效果:

<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 之后
sudo apt-get dist-upgrade
Bash
<!-- 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后台写作,只是享受打字写作的快感,但是并不需要插入代码,所以可能不知道怎么插入代码,其实只要在段落的开头输入 ``` 即可,接着可别忘了填入代码名称,这样就能辨认出插入的是什么代码格式。

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

如何使用Prism代码注入

虽然PRISM是轻量的服务,但是不建议将所有代码给载入(与Google Font一样是从外部加载),免得网站加载变慢,就像我可能会用到的是CSS, HTML, EXCEL Javascript的话,我就只加载这些。如果网站只有几篇文章的话,也可以在Code injectionSite 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网站出现网络问题的话,多少也会影响网站的加载速度,但不影响浏览。

参考: