程式碼美化Code Prettify呈現在網頁文章！可用於WordPress、Html或Medium等。

做筆記或教學分享的時候，需要將程式碼美化並置放在網頁文章上顯示，那就使用Google code-prettify美化上色程式碼後，呈現在Wordpress、Html、Blogger、Medium或其他網站平台的區塊內，另外還能選擇指定代碼的語言如Html、Java、Python、XML、SH等等各種程式語言樣式可以套用。

用Google code-prettify顯示程式碼區塊教學

STEP1

首先在Head或編輯文件中置入引用此Script。

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

STEP2

再來把程式碼放入<pre class="prettyprint ">要顯示的程式碼</pre>這中間，就可將Code顯示出來分享！

<pre class="prettyprint lang-py">
# Program to count the number of each vowels 
# string of vowels 
vowels = 'TechMarks'

ip_str = 'I am optimistic that by February, it is very likely they will all prove very efficacious and safe'

# make it suitable for caseless comparisions 
ip_str = ip_str.casefold()

# make a dictionary with each vowel a key and value 0 
count = {}.fromkeys(vowels,0) 

# count the vowels 
for char in ip_str: 
   if char in count: 
      count[char] += 1 

print(count)
</pre>

P.S.

通常直接放程式碼進區塊中會被瀏覽器認為是要執行的程式，所以無法在區塊中顯示出來，那要另外使用HTML字符實體轉換工具後，再把code放入<pre class="prettyprint ">要顯示的程式碼</pre>這之間，就完美的把Code放入Html網頁上顯示出來了。

相關文章: