如何在Blogger中插入程式碼?
設定方式就是使用blogger小工具( HTML / Javascript)並貼上Code Prettify的程式碼,儲存即完成設定。使用方式則只要在文章編輯中,切換成HTML,在程式碼前後添加<pre>或是<code>標籤,而有些程式需要轉換成HTML的內碼才能顯示。
一、設定
- 直接編輯HTML
- 直接編輯HTML
貼上:Code Prettify
二、使用
<pre>或<code>
可以使用<pre>或<code>在blogger文章編輯HTML模式
(1) <pre>
<pre class="prettyprint">你的程式碼</pre>
如果想要在旁邊加行數,記得class多linenyms,要寫成這樣:
- <pre class="prettyprint linenums">
- 你的程式碼
- 顯示的程式碼會自動內縮
- 單行和偶行會有不同背景色
- 每五行才會有一個行數
- </pre>
可以使用<pre>或<code>在blogger文章編輯HTML模式
(1) <pre><pre class="prettyprint">你的程式碼</pre>
如果想要在旁邊加行數,記得class多linenyms,要寫成這樣:
- <pre class="prettyprint linenums">
- 你的程式碼
- 顯示的程式碼會自動內縮
- 單行和偶行會有不同背景色
- 每五行才會有一個行數
- </pre>
(2) <code>
<code class="prettyprint">
你的程式碼
</code>
2. 轉換:將程式碼轉成HTML內碼
在上圖可以發現,<的HTML內碼是<,而>的HTML內碼是>,故有些程式碼是需要先轉換成HTML讀的懂得語言,即為HTML本身的內碼。因此在貼程式碼前,可以透過一些小工具轉換。
三、外型
Code Prettify的外觀可以用CSS來改變,這裡有現成的外型主題可以選擇,一開始是Defult,而我自己是換成Desert。只要點進Gallery of themes for code prettify,並點擊喜歡的主題,如:Desert,就會打開存在GitHub的CSS程式碼。
留言
張貼留言