1 min read

在網頁中嵌入高亮程式碼

有時候,我們需要在頁面中分享程式碼,但可能會發現:

  • 它居然被執行了!
  • 沒有 highlight 眼睛很痛……
  • 有 highlight,但是配色不好看

嵌入的方法有很多,以下利用 google 的 code-prettify,此方法適用支援 Javascript 的部落格,或者是自己架設的個人網站。


  1. 把你想要貼的 code 重新編碼(encode),以免被瀏覽器執行了。 推薦使用此工具

  2. body最後引用這個 JS 檔。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

這是 Google 提供的服務,除了最常見的HTMLXMLCSSJavascript之外,幾乎主流的語法都有支援( 點此看效果),有興趣的朋友也可以至 Google Code Prettify 深入了解。 如果你會修改部落格的 CSS,這裡還有提供幾種主題,可以直接套用,像我就滿喜歡 sunburst 的。

  1. 將你重新編碼過的程式碼,用以下方式包住。
<pre class="prettyprint">
  你的程式碼
</pre>
  1. 大功告成!