顯示具有 [Blogger] 標籤的文章。 顯示所有文章
顯示具有 [Blogger] 標籤的文章。 顯示所有文章

[Blogger] 如何在網頁Blogger中插入程式碼

在Blogger文章當加入程式碼有幾種方法,首先是下面這種最簡單的方式,已經測試過且成功,但不能滿足我的需求,所以放棄;
http://chiumog.blogspot.tw/2015/02/blog-code-block.html

中間還有使用過很多種方式,但都沒有成功,下面這個連結的教學有讓我成功:
https://pjchender.blogspot.tw/2016/06/prism-syntax-highlighting.html

主要就是透過Prism選擇好要的風格跟支援的語言選好後下載js跟css:
Prismjs.com網址:http://prismjs.com/index.html

一、先把"prism.css"裡面的資料全都貼到 "主題->自訂->進階->新增CSS->新增自訂CSS" 當中,儲存後重新整理即可。(ps. 前後不需要加上<script>之類的標籤)

二、把prism.js的資料貼到 "版面配置->sidebar->新增小工具->HTML/JavaScript->內容" 裡面,有幾點要注意:
(1) 記住一定要新增到sidebar裡面才行,新增到footer會失敗。
(2) 在HTML/JavaScript加入的內容前後要加上<script>跟</script>。
(3) 選擇的語言種類不能太多,超過HTML/JavaScript可以輸入的字數就不能正常啟用了。

不是每個主題都可以套用這個方法,我用"簡單"跟"頂級企業"兩種主題是成功的,Emporio是失敗的。

使用上的範例如下:

<pre><code class="language-python line-numbers">
...
填入程式碼
...
</code></pre>
下面是顯示出python程式碼的結果:

a = input ("Input Number a: ")
b = input ("Input Number b: ")
if int (a) > int (b):
    print (a)
else:
    print (b)

假如程式碼中有特別符號,要在HTML Encoder先轉換過再po: https://www.opinionatedgeek.com/codecs/htmlencoder