如何在Blogger中插入程式碼?


 設定方式就是使用blogger小工具( HTML / Javascript)並貼上Code Prettify的程式碼,儲存即完成設定。使用方式則只要在文章編輯中,切換成HTML,在程式碼前後添加<pre>或是<code>標籤,而有些程式需要轉換成HTML的內碼才能顯示。


一、設定
    1. 直接編輯HTML

貼上:Code Prettify

    1. <script src="https://cdn.jsdelivr.net/gh/google/
      code-prettify@master/loader/run_prettify.js"></script>
二、使用

<pre>或<code>

    1. 可以使用<pre>或<code>在blogger文章編輯HTML模式
      (1) <pre>

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

      如果想要在旁邊加行數,記得class多linenyms,要寫成這樣:

      1. <pre class="prettyprint linenums">
      2. 你的程式碼
      3. 顯示的程式碼會自動內縮
      4. 單行和偶行會有不同背景色
      5. 每五行才會有一個行數
      6. </pre>

            (2) <code>

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

            

            2. 轉換:將程式碼轉成HTML內碼

在上圖可以發現,<的HTML內碼是&lt;,而>的HTML內碼是&gt;,故有些程式碼是需要先轉換成HTML讀的懂得語言,即為HTML本身的內碼。因此在貼程式碼前,可以透過一些小工具轉換。

三、外型

Code Prettify的外觀可以用CSS來改變,這裡有現成的外型主題可以選擇,一開始是Defult,而我自己是換成Desert。只要點進Gallery of themes for code prettify,並點擊喜歡的主題,如:Desert,就會打開存在GitHub的CSS程式碼。



留言

這個網誌中的熱門文章

🛠【ASP.NET Core + Oracle】解決 ORA-00904 "FALSE": 無效的 ID 錯誤與資料欄位動態插入顯示問題

🛠【實戰排除教學】從 VS Code 的 _logger 錯誤,到 PowerShell 找不到 npm/serve,再到 Oracle ORA-03135 連線中斷——一次搞懂!

🔎如何在 Oracle PL/SQL 儲存過程中為文字欄位加入換行符號(CHR(10))——以 Updlcmremark 為例