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

將程式碼美化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網頁上顯示出來了。