網站 / 在網頁內容顯示程式碼語法-Syntax highlighting

網站 / 在網頁內容顯示程式碼語法-Syntax highlighting

Post Views: 80

在可以自己完整編輯的網頁，可以利用javescript控制文字效果做出Syntax highlighting

但是在WordPress架構的網站除非修改核心php內容，否則無法直接套用javescript

嘗試使用Code Snippets添加格式化程式碼語法，但是會出現錯誤，所以還是往WordPress外掛來尋求解決方式

 

1.在找到的教學中，原來WordPress編輯器的<code>就能夠以程式碼的方式來呈現，但無法呈現文字色彩標註，而且有些語法無法用這個方式，像是引用iframe就還是會執行

 

2.可以用Code Syntax Block增加程式語言的支援，增加程式碼文字色彩以及顯示行數，但就必須用區塊編輯器而不是傳統編輯器了

以下是 youtube的iframe嵌入程式碼

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/sg_WE0ToJjM" frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen>
</iframe>

 

3.線上轉換器，透過Html產生table包覆，CSS增加突顯色彩

1
2
3
 
<iframe 
width="560" height="315" src="https://www.youtube.com/embed/sg_WE0ToJjM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen>
</iframe>

 

4.如果要顯示短代碼，可以在短代碼外面再加上一層[  ]

例如：[ [短代碼] ]

參考資料

1.Code Syntax Block：为古腾堡的代码区块添加高亮显示-連結
2.線上轉換器-網站

Tags: ,