在blogger上顯示code block區塊(by google code prettify
加入方式
- 後台
- 版面配置
- 新增小工具
- 選擇 "HTML/JavaScript"
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>按儲存
在文章內容裡要輸入
<pre class="prettyprint linenums"><code>
... <-- 你的程式碼
</code>
</pre>
例如我上方輸入在小工具的code,在文章中的HTML code,如下:
<pre class="prettyprint">
<code>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
</code>
</pre>
注意轉碼
"<"與">"當文字的時候在HTML裡要轉碼,分別是"<"與">",網上也有轉碼程式其他設定
在pre class可加入linenums:指要顯示行號
lang-:使用的語言,例如:"lang-js"是使用javascript,也可在 <code class="language-java">
<pre class="prettyprint linenums lang-js">
<code>...</code>
</pre>
<pre class="prettyprint linenums">
<code class="language-java">...</code>
</pre>
其他語言設定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".
我是參考https://amobiz.github.io/2013/05/28/blogger-google-code-prettify-github-gist/#利用前處理工具處理要貼上網頁的程式碼
一開始一直是不出來,之後到官方github上才發現網址不太一樣
參考自:
- https://amobiz.github.io/2013/05/28/blogger-google-code-prettify-github-gist/#利用前處理工具處理要貼上網頁的程式碼
- https://github.com/google/code-prettify/
留言
張貼留言