不用插件实现WordPress代码高亮显示

Posted on Posted in css, js, wordpress
Tips: 本文创建于2014年11月6日,已超过 2 年,内容或图片可能已经失效!

知更鸟淘的
工具高亮
在线地址 在线代码高亮转换

下载

首先,把highlight.css上传到所使用主题目录中;
highlight.css

  1. /* Main style for the table */  
  2.   
  3. .dp-highlighter  
  4. {  
  5.     font-family"Courier New" , Courier, mono;  
  6.     font-size12px;  
  7.     background-color#FAFAFA;   
  8.     border1px solid #D1D7DC;  
  9.     width: 99%;  
  10.     overflowauto;  
  11.     margin0px 0px 0px 0px;  
  12. }  
  13.   
  14. .dp-highlighter .bar  
  15. {  
  16.     padding2px;  
  17. }  
  18.   
  19. .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar  
  20. {  
  21.     padding-left0px;  
  22. }  
  23.   
  24. .dp-highlighter ol  
  25. {  
  26.     margin0px 0px 1px 38px/* 1px bottom margin seems to fix occasional Firefox scrolling */  
  27.     padding2px;  
  28.     color#2B91AF;  
  29. }  
  30.   
  31. .dp-highlighter.nogutter ol  
  32. {  
  33.     list-style-typenone;  
  34.     margin-left0px;  
  35. }  
  36.   
  37. .dp-highlighter ol li, .dp-highlighter .columns div  
  38. {  
  39.     /*background-color: #fff;*/  
  40.     border-left1px solid #D1D7DC;  
  41.     padding-left10px;  
  42.     line-height18px;  
  43. }  
  44.   
  45. .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div  
  46. {  
  47.     border: 0;  
  48. }  
  49.   
  50. .dp-highlighter .columns  
  51. {  
  52.     colorgray;  
  53.     overflowhidden;  
  54.     width: 100%;  
  55. }  
  56.   
  57. .dp-highlighter .columns div  
  58. {  
  59.     padding-bottom5px;  
  60. }  
  61.   
  62. .dp-highlighter ol li.alt  
  63. {  
  64.     /*background-color: #f8f8f8;*/  
  65. }  
  66.   
  67. .dp-highlighter ol li span  
  68. {  
  69.     color: Black;  
  70. }  
  71.   
  72. /* Adjust some properties when collapsed */  
  73.   
  74. .dp-highlighter.collapsed ol  
  75. {  
  76.     margin0px;  
  77. }  
  78.   
  79. .dp-highlighter.collapsed ol l
    i  
  80. {  
  81.     displaynone;  
  82. }  
  83.   
  84. /* Additional modifications when in print-view */  
  85.   
  86. .dp-highlighter.printing   
  87. {  
  88.     bordernone;  
  89. }  
  90.   
  91. .dp-highlighter.printing .tools  
  92. {  
  93.     displaynone !important;  
  94. }  
  95.   
  96. .dp-highlighter.printing li  
  97. {  
  98.     displaylist-item !important;  
  99. }  
  100.   
  101. /* Styles for the tools */  
  102.   
  103. .dp-highlighter .tools  
  104. {  
  105.     padding3px 8px 3px 15px;  
  106.     border-bottom1px solid #2B91AF;  
  107.     font9pt Verdana, Geneva, ArialHelveticasans-serif;  
  108.     colorsilver;  
  109. }  
  110.   
  111. .dp-highlighter.collapsed .tools  
  112. {  
  113.     border-bottom: 0;  
  114. }  
  115.   
  116. .dp-highlighter .tools a  
  117. {  
  118.     font-size9pt;  
  119.     colorgray;  
  120.     text-decorationnone;  
  121.     margin-right10px;  
  122. }  
  123.   
  124. .dp-highlighter .tools a:hover  
  125. {  
  126.     colorred;  
  127.     text-decorationunderline;  
  128. }  
  129.   
  130. /* About dialog styles */  
  131.   
  132. .dp-about { background-color#fffmargin0pxpadding0px; }  
  133. .dp-about table { width: 100%; height: 100%; font-size11pxfont-familyTahomaVerdanaArialsans-serif !important; }  
  134. .dp-about td { padding10pxvertical-aligntop; }  
  135. .dp-about .copy { border-bottom1px solid #ACA899height: 95%; }  
  136. .dp-about .title { colorredfont-weightbold; }  
  137. .dp-about .para { margin: 0 0 4px 0; }  
  138. .dp-about .footer { background-color#ECEADBborder-top1px solid #ffftext-alignrightright; }  
  139. .dp-about .close { font-size11pxfont-familyTahomaVerdanaArialsans-serif !important; background-color#ECEADBwidth60pxheight22px; }  
  140.   
  141. /* Language specific styles */  
  142.   
  143. .dp-c {}  
  144. .dp-c .comment { colorgreen; }  
  145. .dp-c .string { colorblue; }  
  146. .dp-c .preprocessor { colorgray; }  
  147. .dp-c .keyword { colorblue; }  
  148. .dp-c .vars { color#d00; }  
  149.   
  150. .dp-vb {}  
  151. .dp-vb .comment { colorgreen; }  
  152. .dp-vb .string { colorblue; }  
  153. .dp-vb .preprocessor { colorgray; }  
  154. .dp-vb .keyword { colorblue; }  
  155.   
  156. .dp-sql {}  
  157. .dp-sql .comment { colorgreen; }  
  158. .dp-sql .string { colorred; }  
  159. .dp-sql .keyword { colorrgb(127,0,85); }  
  160. .dp-sql .func { color#ff1493; }  
  161. .dp-sql .op { colorblue; }  
  162.   
  163. .dp-xml {}  
  164. .dp-xml .cdata { color#ff1493; }  
  165. .dp-xml .comments { colorgreen; }  
  166. .dp-xml .tag { font-weightboldcolorblue; }  
  167. .dp-xml .tag-name { colorrgb(127,0,85); font-weightbold; }  
  168. .dp-xml .attribute { colorred; }  
  169. .dp-xml .attribute-value { colorblue; }  
  170.   
  171. .dp-delphi {}  
  172. .dp-delphi .comment { color#008200font-styleitalic; }  
  173. .dp-delphi .string { colorblue; }  
  174. .dp-delphi .number { colorblue; }  
  175. .dp-delphi .directive { color#008284; }  
  176. .dp-delphi .keyword { font-weightboldcolornavy; }  
  177. .dp-delphi .vars { color#000; }  
  178.   
  179. .dp-py {}  
  180. .dp-py .comment { colorgreen; }  
  181. .dp-py .string { colorred; }  
  182. .dp-py .docstring { colorgreen; }  
  183. .dp-py .keyword { colorbluefont-weightbold;}  
  184. .dp-py .builtins { color#ff1493; }  
  185. .dp-py .magicmethods { color#808080; }  
  186. .dp-py .exceptions { color: brown; }  
  187. .dp-py .types {&nbs
    p;color: brown; font-styleitalic; }  
  188. .dp-py .commonlibs { color#8A2BE2font-styleitalic; }  
  189.   
  190. .dp-rb {}  
  191. .dp-rb .comment { color#c00; }  
  192. .dp-rb .string  { color#f0c; }  
  193. .dp-rb .symbol  { color#02b902; }  
  194. .dp-rb .keyword { color#069; }  
  195. .dp-rb .variable { color#6cf; }  
  196.   
  197. .dp-css {}  
  198. .dp-css .comment { colorgreen; }  
  199. .dp-css .string { colorred; }  
  200. .dp-css .keyword { colorblue; }  
  201. .dp-css .colors { color: darkred; }  
  202. .dp-css .vars { color#d00; }  
  203.   
  204. .dp-j {}  
  205. .dp-j .comment { colorrgb(63,127,95); }  
  206. .dp-j .string { colorrgb(42,0,255); }  
  207. .dp-j .keyword { colorrgb(127,0,85); font-weightbold }  
  208. .dp-j .annotation { color#646464; }  
  209. .dp-j .number { color#C00000; }  
  210.   
  211. .dp-cpp {}  
  212. .dp-cpp .comment { color#e00; }  
  213. .dp-cpp .string { colorred; }  
  214. .dp-cpp .preprocessor { color#CD00CDfont-weightbold; }  
  215. .dp-cpp .keyword { color#5697D9font-weightbold; }  
  216. .dp-cpp .datatypes { color#2E8B57font-weightbold; }  
  217.   
  218. .dp-perl {}  
  219. .dp-perl .comment { colorgreen; }  
  220. .dp-perl .string { colorred; }  
  221. .dp-perl .keyword { colorrgb(127,0,85); }  
  222. .dp-perl .func { color#ff1493; }  
  223. .dp-perl .declarations { colorblue; }  
  224. .dp-css .vars { color#d00; }  
  225.   
  226. .dp-g {}  
  227. .dp-g .comment { colorrgb(63,127,95); }  
  228. .dp-g .string { colorrgb(42,0,255); }  
  229. .dp-g .keyword { colorrgb(127,0,85); font-weightbold }  
  230. .dp-g .type { colorrgb(0,127,0); font-weightbold }  
  231. .dp-g .modifier { colorrgb(100,0,100); font-weightbold }  
  232. .dp-g .constant { colorrgb(255,0,0); font-weightbold }  
  233. .dp-g .method { colorrgb(255,96,0); font-weightbold }  
  234. .dp-g .number { color#C00000; }  

其次:打开header.php,加载css,查找:

在后面添加

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

Wordpress会自动把半角符号替换为全角,别人复制下来的函数代码标点是全角的,无法使用,切记!
解决办法:
编辑 wp-includes/formatting.php 文件,找到以下代码(针对wordpress 4.0),注释掉:

  1. elseif?(?empty(?$no_texturize_shortcodes_stack?)?&&?emptyempty(?$no_texturize_tags_stack?)?)?{
  2. ????????????//?This?is?neither?a?delimiter,?nor?is?this?content?inside?of?no_texturize?pairs.??Do?texturize.
  3. ????????????$curl?=?str_replace(?$static_characters,?$static_replacements,?$curl?);
  4. ????????????if?(?false?!==?strpos(?$curl,?"'"?)?)?{
  5. ????????????????$curl?=?preg_replace(?$dynamic_characters['apos'],?$dynamic_replacements['apos'],?$curl?);
  6. ????????????}
  7. ????????????if?(?false?!==?strpos(?$curl,?'"'?)?)?{
  8. ????????????????$curl?=?preg_replace(?$dynamic_characters['quote'],?$dynamic_replacements['quote'],?$curl?);
  9. ????????????}
  10. ????????????if?(?false?!==?strpos(?$curl,?'-'?)?)?{
  11. ????????????????$curl?=?preg_replace(?$dynamic_characters['dash'],?$dynamic_replacements['dash'],?$curl?);
  12. ????????????}
  13. ????????????//?9x9?(times),?but?never?0x9999
  14. ????????????if?(?1?===?preg_match(?'/(?<=\d)x-?\d/',?$curl?)?)?{
  15. ????????????????//?Searching?for?a?digit?is?10?times?more?expensive?than?for?the?x,?so?we?avoid?doing?this?one!
  16. ????????????????$curl?=?preg_replace(?'/\b(\d(?(?<=0)[\d\.,]+|[\d\.,]*))x(-?\d[\d\.,]*)\b/',?'$1&#215;$2',?$curl?);
  17. ????????????}
  18. ????????}

Leave a Reply

Your email address will not be published. Required fields are marked *

eighteen + nineteen =