在 Blogger 中顯示明顯的程式碼區塊 Code Block
文章內若有一些符號、程式碼,當你加入時會出現亂碼或版面跑位,就需要使用程式碼區塊。以下是設定的幾個步驟:
- 在「版面配置」頁中的「側欄(底部)」點擊「新增小工具」。
- 點擊加入「HTML / JavaScript」。
- 標題的部分可不填,內容的部分貼上 Google Code Prettify 的程式碼如下。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
- 儲存後,將「HTML / JavaScript」功能區塊拉到最底。
- 在文章內容裡要輸入以下區塊:
<pre class="prettyprint linenums">
<code> <--可有可無
xxxxxxxxx <-- 你的程式碼
</code> <--可有可無
</pre>
注意轉碼。"<"與">"當文字的時候在HTML裡要轉碼,分別是"<"與">",網上也有轉碼程式
在pre class可加入
- linenums:指要顯示行號
- lang-:使用的語言,例如:"lang-js"是使用javascript,也可在 <code class="language-java">。 以下是相關的語言參數: ang-***(***xxx的替代選項)
The lang-* class specifies the language file extensions. File extensions supported by default include:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
留言
張貼留言
Aron阿龍,謝謝您的留言互動!