2019年12月24日 星期二

如何在 Blogger 顯示程式碼 - 使用 Google Code Prettify

Blogger 本身沒有內建的貼code語法,
可使用 Google Code Prettify,原本 Google Code Prettify 是放在 Google Code,但後來釋出放在 Github 上,

在 Blogger 後台 > 版面配置 > 新增小工具 裡



















新增 HTML/JavaScript

























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

就完成了

使用方式
<pre class="prettyprint">
程式碼...
</pre>

<code class="prettyprint">
程式碼...
</code>

*如果code有使用到<或是>之類的符號必須要先經過HTML轉碼

有四種主題可選擇
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>

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

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

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

沒有留言:

張貼留言