教程由來

説起 WordPress 代碼高亮問題,我相信很多 WordPress 站長都十分的需要吧,特別是從小白晉級為大神的階段,博客裏難免會出現很多代碼的記錄保存以作備忘,這個時候就十分需要代碼高亮的功能能夠讓我們貼出的代碼美觀易於閲讀,實現 WordPress 代碼高亮的方法有很多,例如插件,百度一下,什麼 10 大 WordPress 代碼高亮插件、 WordPress 最強大代碼高亮插件的全出來了,小 2 不否認他們的強大性!

但是再強大無非也就是代碼高亮而已,遇見那些不經常貼代碼的童靴來説,安裝這麼一款強大的插件又有些浪費的趕腳,那什麼樣的辦法能夠既方便又小巧還利於用户體驗呢?

今天説的,就是非插件 WordPress 代碼高亮的實現!

CodeRender

我説出這個時候,大神們就恍然大悟了,有種 「小 2 你過來,我保證不打你」 的衝動,哈哈。。。對此我想説,大神,此貼不是寫給你看的,求翻看其他內容。。。

這裏簡約的説下其含義吧,意思就是讓你們的主題加載一段 css 後,通過 CodeRender 生成出來的代碼,貼進我們的 WordPress 博客後就能夠立馬顯示出美觀的樣子出來,例如:

20140503154814

目前 CodeRender 輸出的樣式類有很多,我們就拿最原始的 css 給大家,具體 css 的美化,大家可以自行修改,下載地址 → 傳送門

下載文件後,解壓得到 highlightx.css 文件,將其文件放到 WordPress 主題的根目錄下,然後進行其 css 文件的調用;

打開 WordPress 主題文件夾下的 header.php 文件夾,在</head> 前面加入

  1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />

保存即可,當然大家也可將 highlightx.css 文件裏的所有內容複製粘貼到你們 WordPress 主題的 style.css 文件的最下面。。。作用是一樣的,分開文件調用可以定義什麼樣的頁面調用什麼樣的樣式,當然這是大神所瞭解的,小白們也不需要了解為什麼分開調用會更好些。。。哈哈。。。。

那麼現在你的主題就支持 CodeRender 輸出內容的樣式顯示了!

下面小 2 就提供個工具頁面,能夠直接輸出代碼的 → 傳送門

通過這個工具,即可直接將代碼轉換為 div 的內容

20140503160040

將我們的代碼複製進 【輸入源代碼】 後,選擇代碼的語言,這裏支持的語言有:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi

然後點擊轉換,得出的 html 代碼即為我們要複製貼進 WordPress 文章編輯裏的,當然複製的時候,WordPress 最好是文本模式,非可視化模式!!!

到這裏本教程應該全部結束了,但是還有個致命的問題發生,就是我們放進去的代碼會被 WordPress 自動把半角符號替換為全角,這樣帶來的問題就是,別人複製你的代碼後,無法正常使用。。。操作方法就是找到我們主題文件的 functions.php,打開後在最下面貼上

  1. remove_filter('the_content', 'wptexturize');

到這裏,就全部 OK 了,非插件 WordPress 代碼高亮的實現就是這麼簡單!教程真心簡單且小白也容易接受,請轉載者註明出處!