也想出現在這里?聯系我們

wordpress代碼高亮的實現,拒絕插件!

2014.05.03 wordpress教程
  • 文章介紹
  • 升級版本
  • 評價&建議

教程由來

說起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. //禁止代碼標點轉換
  2. remove_filter('the_content',?'wptexturize');

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

有用14
  • 2014.05.03初次和大家見面了!

已擁有7人對該主題的建議

  1. 0樓
    飛羽:

    為什么我試了但是不顯示行號呢?

    2016-02-17 上午 10:42 [回復]
    • 瘋狂的大叔:

      跟css有關的。。。你可以試試

      2016-02-27 下午 3:12 [回復]
  2. 0樓
    袁源:

    還要自己粘貼并轉換一下,感覺不方便……

    2015-11-30 下午 1:58 [回復]
  3. 0樓
    cuoxiansheng:

    請問那個read more 是這么出來的,我發布的文章是直接全文出現在首頁。

    2014-08-29 下午 5:36 [回復]
    • 瘋狂的大叔:

      文章編輯里有個more的按鈕的 !

      2014-08-30 下午 9:59 [回復]
  4. 0樓
    稀飯網:

    想請教一下的是,這個日志里面發上代碼我折騰了一天還是沒搞定。最后也就是現在。把代碼發到評論里了事。我也從別人的博客里找了那些插件之類的,可是寫日志的時候,那些插件都沒有出來啊?
    flashfxp的注冊碼,大大你是知道的吧?總之,那行注冊碼一放上去,直接一個日志頁面就從左到右都是文字顯現區域了,就是不會自動轉行什么的。

    2014-07-21 上午 3:38 [回復]
    • 瘋狂的大叔:

      wp后臺編輯文章的時候,編輯框的右上角,是有個可視化和文本的,一般貼代碼是要在文本里貼的。。。。

      2014-07-21 上午 10:21 [回復]

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
夫妇野外交换HD高清版,免费A片在线观看,亚洲精品国产自在现线,中国老妇人60OLDMANTV