在Elementor編輯下,想要秀出一段code在頁面,且這段code不能被執行,純是秀出來的話,一般的Syntax Highlighter相關外掛在Elementor不起作用,但有個方式可以...
Elementor目前不支援任何高亮程式碼外掛的效果,但可以安裝另一支高亮程式碼外掛並透過傳統編輯器先插入code後再複製至Elementor中貼上使用。
方法一 : 用外掛
步驟如下 :
- 安裝這支免費外掛「Pastacode」。
- 先一般傳統編輯器中點擊插入code的按鈕,並貼上想呈現的程式碼後;
- 再檢視編輯器的原始碼並複製;
- 再進到Elementor中拉一個簡碼工具並貼上即可。
方法二 : 用「textarea」標籤
提供另一個方式:
我們可以用html標籤中的「textarea」標籤,
1、在Elementor中拉一個html工具;
2、鍵入下列語法:
<textarea class="showcode" style="width:100%;height:500px;color:#000000;" >
<!--code --><!--code -->
</textarea>
ps:那個 <!--code --> 也可以刪掉 ,不然它也會在前台秀出來。
3、把此html工具另存成全域小工具。
4、以後把要秀出的code都拉這個全域小工具後把code填在中間。
把全域小工具拉出這個「showcode」(我自己的命名)後,並點「Unlink」然後在中間填入你要秀出的code就可以了。
5、效果
※總結
我喜用方法二,原因是方法一雖然code秀出來時好看,但是在網頁瀏覽時複製下來時卻不會斷行,有點麻煩。
而方法二雖然只是純文字沒有什麼樣式但是至少複製時會有斷行且可以少裝一個外掛,所以我推薦方法二。