有時候,我們需要在頁面中分享程式碼,但可能會發現:
- 它居然被執行了!
- 沒有 highlight 眼睛很痛……
- 有 highlight,但是配色不好看
嵌入的方法有很多,以下利用 google 的 code-prettify,此方法適用支援 Javascript 的部落格,或者是自己架設的個人網站。
-
把你想要貼的 code 重新編碼(encode),以免被瀏覽器執行了。 推薦使用此工具。
-
在
body
最後引用這個 JS 檔。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
這是 Google 提供的服務,除了最常見的HTML
、XML
、CSS
、Javascript
之外,幾乎主流的語法都有支援(
點此看效果),有興趣的朋友也可以至 Google Code Prettify 深入了解。
如果你會修改部落格的 CSS,這裡還有提供幾種主題,可以直接套用,像我就滿喜歡 sunburst 的。
- 將你重新編碼過的程式碼,用以下方式包住。
<pre class="prettyprint">
你的程式碼
</pre>
- 大功告成!