對於一個新手部落客並且有在部落格發表程式碼的需求來說，急需想知道的就是「嵌入程式碼」的方法， pixnet 有兩個免費的「擴充功能」可以幫助在 pixnet 內加入程式碼，一是「Syntax Highlighter」擴充功能，另一是「快速插入 HTML 語法」擴充功能。
「Syntax Highlighter」擴充功能比較簡單，但顯示的程式碼除了定寬字體之外就沒別的特色。而「快速插入 HTML 語法」擴充功能則允許豐富的 HTML 語法，因此不論是否熟悉 HTML 語法，當搭配第三方的 HTML 轉換器，它可以變化出許多不同字型、字體顏色、和底色組合，也有 HTML 轉換器會另外帶入「程式碼行號」。
因為這兩個況充功能並不是預設的功能，而是要到「痞客邦市集」安裝這兩個擴充功能，請讀者先自行安裝這兩個擴充功能，這篇文章只分別對這兩種擴充功能的使用加以說明。
一、透過「Syntax Highlighter」嵌入程式碼
1. 當你在 pixnet 痞客邦「編輯文章」視窗，在編寫文章時需要插入一段程式碼，你只要將滑鼠游標移動到要插入程式碼的位置，點選「更多擴充功能」裡的「Syntax Highlighter」圖示。
2. 這時，畫面跳出《Syntax Highlighter》子視窗，分別在〈程式語言〉和〈程式碼〉欄位裡填入你所使用的程式語言名稱和程式碼，再點選【送出】按鍵。
3. 這時，在 pixnet 痞客邦「編輯文章」視窗游標位置自動顯示定寬字的程式碼。
這是以「Syntax Highlighter」擴充功能產生的程式碼。
score = int(input("Please enter score 0 ~100"))
level = score // 10
{
10: lambda: print("Perfect"),
9: lambda: print("Grade A"),
8: lambda: print("Grade B"),
7: lambda: print("Grade C"),
6: lambda: print("Grade D")
}.get(level, lambda: print("Grade E"))()
二、透過「快速插入 HTML 語法」嵌入程式碼
同樣地，當你在 pixnet 痞客邦「編輯文章」視窗，在編寫文章時需要插入一段程式碼，你可以使用「快速插入 HTML 語法」擴充功能，這個擴充功能提供較大自由度的方式編寫 HTML 文本，透過豐富的 HTML 語法，讓所要顯現的特定文本（或程式碼）以多元並符合特定程式語法架構的方式呈現。
對於不熟悉 HTML 語法的朋友，也請不用擔心，在網路上可以找到一些免費的線上語法轉換器，這篇文章會介紹幾個作者試用後覺得還可接受的語法轉換器。讀者也可以試著在網路上搜尋「syntax highlighter」關鍵字，尋找其它語法轉換器。
1. 首先，只要將滑鼠游標移動到要插入程式碼的位置，點選「更多擴充功能」裡的「快速插入 HTML 語法」圖示。
2. 這時螢幕跳出《快速插入 HTML 語法》子視窗。
3. 接著點選以下網頁連結另外開啟瀏覽器進入線上語法轉換器。
http://formatmysourcecode.blogspot.com/
4. 將原本要輸入的程式碼貼到〔Paste your text here.〕框框裡，這個線上語法轉換器沒有太多複雜的選項，預設的定位符號是 4 個半形字元，〝Embed Stylesheet〞也是勾選的。移動滑鼠點選【Format Text】按鍵，經 HTML 編碼後的文本出現在【Format Text】按鍵下方的框框裡，再下一個框框則是預覽的結果。
5. 回到步驟二的《快速插入 HTML 語法》子視窗，貼上剛剛複製的經 HTML 編碼後的文本，點選【送出】按鍵。
6. 這時，《快速插入 HTML 語法》子視窗自動關閉，原先在 pixnet 痞客邦「編輯文章」視窗出現經 HTML 編碼過的程式碼。
這是在〈formatmysourcecode〉轉碼後再貼到「快速插入 HTML 語法」擴充功能產生的程式碼。
score = int(input("Please enter score 0 ~100"))
level = score // 10
{
10: lambda: print("Perfect"),
9: lambda: print("Grade A"),
8: lambda: print("Grade B"),
7: lambda: print("Grade C"),
6: lambda: print("Grade D")
}.get(level, lambda: print("Grade E"))()
7. 第二個線上語法轉換器的網頁位置如下，點選以下網頁連結另外開啟瀏覽器進入線上語法轉換器。
https://pinetools.com/syntax-highlighter
8. 這個線上轉換器有比較多的功能選項，首先貼上要轉換的程式碼到《UNHIGHLIGHTED CODE》的框框裡；再來，不使用自動偵測語言而是選擇正確的程式語言，避免偵測錯誤；接著根據自己的喜好選擇喜歡的程式碼格式，最後用滑鼠點選【HIGHLIGHT!】按鍵。
經 HTML 編碼後的文本出現在《HIGHLIGHTED CODE》框框裡，而 HTML 編碼在《HIGHLIGHTED CODE (HTML)》框框裡。點選【Select all】並複製 HTML 編碼。
9. 回到步驟二的《快速插入 HTML 語法》子視窗，貼上剛剛複製的經 HTML 編碼後的文本，點選【送出】按鍵。
10. 這時，《快速插入 HTML 語法》子視窗自動關閉，原先在 pixnet 痞客邦「編輯文章」視窗出現經 HTML 編碼過的程式碼。
這是在〈pinetools〉轉碼後再貼到「快速插入 HTML 語法」擴充功能產生的程式碼。
score = int(input("Please enter score 0 ~100")) level = score // 10 { 10: lambda: print("Perfect"), 9: lambda: print("Grade A"), 8: lambda: print("Grade B"), 7: lambda: print("Grade C"), 6: lambda: print("Grade D") }.get(level, lambda: print("Grade E"))()
11. 第三個線上語法轉換器的網頁位置如下，點選以下網頁連結另外開啟瀏覽器進入線上語法轉換器。
https://highlight.hohli.com/index.php
12. 這個線上轉換器功能選項很簡潔，首先先選擇正確的程式語言；貼上要轉換的程式碼到《Paste your source here:》的框框裡；再來，根據自己的喜好選擇勾選〔Line numbers〕和〔Use <font> tag (i.e. for Habrahabr)〕，最後用滑鼠點選【Highlight!】按鍵。
經 HTML 編碼後的文本出現在《Preview》框框裡，而 HTML 編碼在《HTML Code》框框裡。點選《HTML Code》旁邊的【Copy to clipboard】複製 HTML 編碼到記事板。
13. 回到步驟二的《快速插入 HTML 語法》子視窗，貼上剛剛複製的經 HTML 編碼後的文本，點選【送出】按鍵。
14. 這時，《快速插入 HTML 語法》子視窗自動關閉，原先在 pixnet 痞客邦「編輯文章」視窗出現經 HTML 編碼過的程式碼。
這是在〈highlight.hohli〉轉碼後再貼到「快速插入 HTML 語法」擴充功能產生的程式碼。
- score = int(input("Please enter score 0 ~100"))
- level = score // 10
- {
- 10: lambda: print("Perfect"),
- 9: lambda: print("Grade A"),
- 8: lambda: print("Grade B"),
- 7: lambda: print("Grade C"),
- 6: lambda: print("Grade D")
- }.get(level, lambda: print("Grade E"))()
15. 第四個線上語法轉換器的網頁位置如下，點選以下網頁連結另外開啟瀏覽器進入線上語法轉換器。
16. 這個線上轉換器功能選項看起來也很簡潔，首先先貼上要轉換的程式碼到《Source code:》的框框裡；接著選擇正確的程式語言；再來，根據自己的喜好選擇選擇〔Style〕，最後用滑鼠點選【Highlight】按鍵。
經 HTML 編碼後的文本出現在右邊《Preview》框框裡，而 HTML 編碼在左側《HTML Code》框框裡。全選《HTML Code》後複製 HTML 編碼到記事板。
17. 回到步驟二的《快速插入 HTML 語法》子視窗，貼上剛剛複製的經 HTML 編碼後的文本，點選【送出】按鍵。
18. 這時，《快速插入 HTML 語法》子視窗自動關閉，原先在 pixnet 痞客邦「編輯文章」視窗出現經 HTML 編碼過的程式碼。
這是在〈tohtml〉轉碼後再貼到「快速插入 HTML 語法」擴充功能產生的程式碼。
score = int(input("Please enter score 0 ~100")) level = score // 10 { 10: lambda: print("Perfect"), 9: lambda: print("Grade A"), 8: lambda: print("Grade B"), 7: lambda: print("Grade C"), 6: lambda: print("Grade D") }.get(level, lambda: print("Grade E"))()
19. 第五個線上語法轉換器的網頁位置如下，點選以下網頁連結另外開啟瀏覽器進入線上語法轉換器。
20. 首先先貼上要轉換的程式碼到《Source code:》的框框裡；接著選擇正確的程式語言；再來，根據自己的喜好選擇選擇〔Style〕，並勾選〔Line numbers〕；最後用滑鼠點選【Highlight!】按鍵。
經 HTML 編碼後的文本出現在左下角《Preview:》框框裡，而 HTML 編碼在右邊《HTML》框框裡。全選《HTML》後複製 HTML 編碼到記事板。
21. 回到步驟二的《快速插入 HTML 語法》子視窗，貼上剛剛複製的經 HTML 編碼後的文本，點選【送出】按鍵。
22. 這時，《快速插入 HTML 語法》子視窗自動關閉，原先在 pixnet 痞客邦「編輯文章」視窗出現經 HTML 編碼過的程式碼。
這是在〈hilite〉轉碼後再貼到「快速插入 HTML 語法」擴充功能產生的程式碼。
1 2 3 4 5 6 7 8 9 |
score = int(input("Please enter score 0 ~100")) level = score // 10 { 10: lambda: print("Perfect"), 9: lambda: print("Grade A"), 8: lambda: print("Grade B"), 7: lambda: print("Grade C"), 6: lambda: print("Grade D") }.get(level, lambda: print("Grade E"))() |
在這篇文章裡提到五種不同的第三方 HTML 語法轉換器，有的功能陽春，只顯示定寬字體；有的功能花俏，可選擇不同的程式語言，有不同的字體顏色、背景底色和程式碼編號等等。各位讀者可依照自己的喜好選擇適合的第三方 HTML 語法轉換器，增加自己文章的可閱讀性。
老驥於 2020/4/27
科普 (1)