前言
因為上班之後，要學的東西太多了，主管建議我可以筆記下來，後來我想說乾脆就寫部落格吧！如果要寫技術類的，或多或少也要貼一些範例程式碼。只是沒想到Blogger居然沒有支援，所以只好來找個方式來解決。
其實很簡單
基本設定
我是個懶惰的人，設定太多的不用，後來就選到Google Code Prettify。其實只要參考google/code-prettify裡面做設定就可以完成了：
這段JavaScript需要放進Blooger，放哪裡?隨便。不是啦，放在：
版面配置裡面有辦法新增小工具的地方，有很多?沒關係，隨便找一個地方放，下次再寫一篇討論這個問題。
之後呢，就可以在寫文章時，透過切換成HTML模式，把你想要的程式碼嵌進去了。你可以選擇先在撰寫頁貼上，在切過去修改，或者直接在那邊處理。不過我是建議前者，因為這樣很直覺，也可以省去一些不必要的工(因為如果是用後者，則需要再將程式碼轉換過，避免一些"<" 、">"等被解讀錯誤。而前者則是blogger已顯示為前提轉換成HTML裡的編碼，所以就不用再找工具來轉換。)。再來就是確定程式碼是否有擺對地方了：
這段JavaScript需要放進Blooger，放哪裡?隨便。不是啦，放在：
版面配置裡面有辦法新增小工具的地方，有很多?沒關係，隨便找一個地方放，下次再寫一篇討論這個問題。
選擇HTML/JavaScript，之後，把下面那段script丟進去:
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
我的好像長的不一樣，這等一下講。
之後呢，就可以在寫文章時，透過切換成HTML模式，把你想要的程式碼嵌進去了。你可以選擇先在撰寫頁貼上，在切過去修改，或者直接在那邊處理。不過我是建議前者，因為這樣很直覺，也可以省去一些不必要的工(因為如果是用後者，則需要再將程式碼轉換過，避免一些"<" 、">"等被解讀錯誤。而前者則是blogger已顯示為前提轉換成HTML裡的編碼，所以就不用再找工具來轉換。)。再來就是確定程式碼是否有擺對地方了：
要用，<pre></pre>或是<code></code>包起來。
好了，這樣就有基本功能了。接下來：其他設定
設定語言
顯示行數
設定外觀
你可以透過設定skin來達到更換風格，至於可以填的值要查Gallery of themes for code prettify，但是因為有點不合我胃口，所以我選擇Plan B。COLOR THEMESFORGOOGLE CODE PRETTIFY裡面選擇更多了，而且只要在之前在script的地方前頭貼上CSS，並且用<style></style>包起來就好了，這也就是為什麼上面我的script會比較雜的原因。
後記
即便是一篇不算很難的文章，還是花了很久，寫得不一定很好，也許還是可以考慮一下下方的連結。不過我覺得，至少我不是用抄襲的，希望會慢慢進步。
References
google/code-prettify
在 Blogger 上用 Google Code Prettify 及 GitHub Gist 顯示程式碼 (不修改範本的懶人招數)
在 Google Blogger 顯示程式碼
COLOR THEMESFORGOOGLE CODE PRETTIFY
HMTL TO XML PARSER - ADSENSE PARSER
沒有留言:
張貼留言