讓Elementor中可以秀出高亮程式碼來分享

在Elementor編輯下,想要秀出一段code在頁面,且這段code不能被執行,純是秀出來的話,一般的Syntax Highlighter相關外掛在Elementor不起作用,但有個方式可以...

Elementor目前不支援任何高亮程式碼外掛的效果,但可以安裝另一支高亮程式碼外掛並透過傳統編輯器先插入code後再複製至Elementor中貼上使用。

方法一 : 用外掛

步驟如下 :

  1. 安裝這支免費外掛「Pastacode」。
  2. 先一般傳統編輯器中點擊插入code的按鈕,並貼上想呈現的程式碼後;
  3. 再檢視編輯器的原始碼並複製;
  4. 再進到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秀出來時好看,但是在網頁瀏覽時複製下來時卻不會斷行,有點麻煩。

而方法二雖然只是純文字沒有什麼樣式但是至少複製時會有斷行且可以少裝一個外掛,所以我推薦方法二

Facy

我是Facy,浸淫網路行銷多年,凡是網路行銷相關都興趣十足,特別是「關鍵字&內容行銷」! 目前主要是專職部落客、網站接案製作、架站教學,歡迎找我聊聊。

  • 如果您需要問我相關的話,可以加入FB社團一起交流或寫信給我: [email protected]
  • 如果您需要更系統性的學習,歡迎參考我的線上課程或家教班
  • 如果您有單一性的問題,例如網站健診、文章問題、做不出的功能,目前接受付費線上家教

發表留言