『其他』如何在Blogger文章顯示程式碼

在部落格中嵌入好看的程式碼，應該是部落工程師的必備條件

雖然桌面截圖好像來得更快更方便，但是缺點就是不能讓讀者用CV大法

以下就來教學如何在Blogger中嵌入程式碼

顯示結果如下↓

import UIKit
import Firebase

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    FirebaseApp.configure()
    return true
  }
}

將程式碼嵌入Blogger部落格的方法之一

這方法是在頁面中加入可以顯示程式碼的Script

步驟一：

在後台管理頁面點選版面配置然後點選新增小工具。

步驟二：
他會跳出一個小視窗，在選擇HTML/JavaScript

步驟三：
標題留空，在內容輸入以下程式碼

<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px;
line-height: 1.2em;
}
</style>

這樣就大功告成啦！


如果想在文章使用程式碼
只要在程式碼開頭打入

<pre class="codeblock">

程式碼結尾打入

</pre>

例如：

<pre class="codeblock">
你想放入的程式碼
</pre>

實作畫面如下↓

若你想要貼的程式碼本身就是HTML檔案的話，那網頁可能會直接執行或是不顯示出來

那你就必須到這裡把程式碼轉碼即可

若你想要讓程式碼不單調，想讓程式碼自動變色

則如同上述步驟到版面配置→新增小工具→HTML/JavaScript

在內容輸入下列程式碼後在按下儲存：

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

加入方式則是在開頭多一個pretty print：

<pre class="codeblock prettyprint">
你的程式碼
</pre>

這樣就可以產生彩色程式碼了！

以上就是在部落格加入程式碼的方法！

我是Andy Huang，大家下次見！

參考來源：PJCHENDER-[教學]如何在網頁blogger中插入程式碼