做筆記或教學分享的時候,需要將程式碼美化並置放在網頁文章上顯示,那就使用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網頁上顯示出來了。