Blogger Code Syntax Highlighting with Prism

Prism

Prism 是一款簡單又好看，好用的要死的 Code Syntax Highlighting 套件，輕量化，而且 plugin 又多方便套用自己擅長的的程式語言。

使用方式

安裝在 Blogger 上其實大同小異，可以參考

• https://edricteo.com/adding-syntax-highlighting-to-ghost-cms-using-prism-js-cdn/

免費的 CDN

一開始我是用 GoogleDriver 來當免費的 css 跟 js hosting，但幾次改版後，hosting 的功能就失效了。於是改用免費的 CDN 。
推薦一下 JSDELIVR，可以免費幫你把多個 js ，Collection 成一個 resource，一次引用
http://www.jsdelivr.com/projects/prism

這個 Bloger 用到的 Resource

css

https://cdn.jsdelivr.net/g/prism@1.6.0(plugins/ie8/prism-ie8.css+themes/prism-okaidia.css+plugins/line-numbers/prism-line-numbers.css+plugins/previewer-color/prism-previewer-color.css)

css 使用方式

<link href='https://cdn.jsdelivr.net/g/prism@1.6.0(plugins/ie8/prism-ie8.css+themes/prism-okaidia.css+plugins/line-numbers/prism-line-numbers.css+plugins/previewer-color/prism-previewer-color.css)' rel='stylesheet'/>

JS

https://cdn.jsdelivr.net/g/prism@1.6.0(prism.js+components/prism-java.min.js+components/prism-javascript.min.js+components/prism-php-extras.min.js+components/prism-php.min.js+components/prism-bash.min.js+components/prism-clike.min.js+components/prism-markup.min.js+plugins/line-numbers/prism-line-numbers.min.js+plugins/previewer-color/prism-previewer-color.min.js)

JS 使用方式

<script src='https://cdn.jsdelivr.net/g/prism@1.6.0(prism.js+components/prism-java.min.js+components/prism-javascript.min.js+components/prism-php-extras.min.js+components/prism-php.min.js+components/prism-bash.min.js+components/prism-clike.min.js+components/prism-markup.min.js+plugins/line-numbers/prism-line-numbers.min.js+plugins/previewer-color/prism-previewer-color.min.js)' type='text/javascript'/>