教程由來
說起 WordPress 程式碼高亮問題,我相信很多 WordPress 站長都十分的需要吧,特別是從小白晉級為大神的階段,部落格裡難免會出現很多程式碼的記錄儲存以作備忘,這個時候就十分需要程式碼高亮的功能能夠讓我們貼出的程式碼美觀易於閱讀,實現 WordPress 程式碼高亮的方法有很多,例如外掛,百度一下,什麼 10 大 WordPress 程式碼高亮外掛、 WordPress 最強大程式碼高亮外掛的全出來了,小 2 不否認他們的強大性!
但是再強大無非也就是程式碼高亮而已,遇見那些不經常貼程式碼的童靴來說,安裝這麼一款強大的外掛又有些浪費的趕腳,那什麼樣的辦法能夠既方便又小巧還利於使用者體驗呢?
今天說的,就是非外掛 WordPress 程式碼高亮的實現!
CodeRender
我說出這個時候,大神們就恍然大悟了,有種 「小 2 你過來,我保證不打你」 的衝動,哈哈。。。對此我想說,大神,此貼不是寫給你看的,求翻看其他內容。。。
這裡簡約的說下其含義吧,意思就是讓你們的主題載入一段 css 後,透過 CodeRender 生成出來的程式碼,貼進我們的 WordPress 部落格後就能夠立馬顯示出美觀的樣子出來,例如:

目前 CodeRender 輸出的樣式類有很多,我們就拿最原始的 css 給大家,具體 css 的美化,大家可以自行修改,下載地址 → 傳送門
下載檔案後,解壓得到 highlightx.css 檔案,將其檔案放到 WordPress 主題的根目錄下,然後進行其 css 檔案的呼叫;
開啟 WordPress 主題資料夾下的 header.php 資料夾,在</head> 前面加入
- <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />
儲存即可,當然大家也可將 highlightx.css 檔案裡的所有內容複製貼上到你們 WordPress 主題的 style.css 檔案的最下面。。。作用是一樣的,分開檔案呼叫可以定義什麼樣的頁面呼叫什麼樣的樣式,當然這是大神所瞭解的,小白們也不需要了解為什麼分開呼叫會更好些。。。哈哈。。。。
那麼現在你的主題就支援 CodeRender 輸出內容的樣式顯示了!
下面小 2 就提供個工具頁面,能夠直接輸出程式碼的 → 傳送門
透過這個工具,即可直接將程式碼轉換為 div 的內容

將我們的程式碼複製進 【輸入原始碼】 後,選擇程式碼的語言,這裡支援的語言有:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi
然後點選轉換,得出的 html 程式碼即為我們要複製貼進 WordPress 文章編輯裡的,當然複製的時候,WordPress 最好是文字模式,非視覺化模式!!!
到這裡本教程應該全部結束了,但是還有個致命的問題發生,就是我們放進去的程式碼會被 WordPress 自動把半形符號替換為全形,這樣帶來的問題就是,別人複製你的程式碼後,無法正常使用。。。操作方法就是找到我們主題檔案的 functions.php,開啟後在最下面貼上
- remove_filter('the_content', 'wptexturize');
到這裡,就全部 OK 了,非外掛 WordPress 程式碼高亮的實現就是這麼簡單!教程真心簡單且小白也容易接受,請轉載者註明出處!