WordPress教程

好用又好看的WordPress代码高亮插件:WP-GeSHi-Highlight

WordPress日记 2018-07-30 WP插件使用 364 次

最近相对清闲了一点,所以网站更新的内容也多了些,在更新网站内容的时候发现网站的代码高亮弄的真是太丑了,所以决定换个好一点的代码高亮插件(网站原来直接使用的是bootstrap自带的pre以及code样式)。

到网上搜了搜看了看,发现很多用的都是那种带行号的,而且奇数行和偶数行的背景色不同,感觉挺好看的。然后就发现了带行号的代码高亮插件:WP-GeSHi-Highlight,安装上以后测试了一下,发现有行号,但是样式确实有点不好看,于是自己又修改了一下样式,最后实现了我要的理想的样式。

首先下载插件就不说了,后台在线下载或者到插件官网下载都可以。

然后就是代码的使用方法,也就是书写格式了

  1. <pre lang="html" line="1" escaped="true" >
    
  2. //这里添加代码……

其中,lang=”html”表示代码语言为html,请根据自己需要修改; line=”1″ 表示显示行号,如果不需要,去掉即可;escaped=”true” 是为了防止代码转义,如果不需要,去掉即可。

注意:在wordpress后台使用 WP-GeSHi-Highlight 等代码高亮插件,需要在html模式下添加代码,不要随意切换到可视化模式,否则代码就容易转义!!

自定义WP-GeSHi-Highlight插件的样式

在这个插件的目录下有一个wp-geshi-highlight.css 文件,将这个文件复制到你当前所用的主题根目录,然后修改里面的css代码即可(但是也别忘记在网站头部引入这个CSS文件哦)。这样一来,即使更新 WP-GeSHi-Highlight 插件,也不会丢失你的自定义样式了。

如果你觉得本站的样式就是你需要的样式,那就直接复制粘贴使用下面的样式吧,哈哈

  1. .wp-geshi-highlight pre, .wp-geshi-highlight span {
  2.     overflow: visible;
  3.     margin: 0 !important;
  4.     padding: 0;
  5.     border: none;
  6.     box-shadow: none;
  7.     background: none;
  8.     font-size: 12px !important;
  9.     line-height: 20px !important;
  10.     font-family: Consolas, Monaco, 'Lucida Console', monospace;
  11.     white-space: pre-wrap;
  12.     word-wrap: break-word;
  13. }
  14.  
  15. .wp-geshi-highlight ol {
  16.     margin: 0 !important;
  17.     padding: 0 !important;
  18.     list-style-type: decimal !important;
  19. }
  20.  
  21. .wp-geshi-highlight ol > li {
  22.     position: relative; /* Create a positioning context */
  23.     margin: 0 0 0 30px; /* Give each list item a left margin to make room for the numbers */
  24. }
  25.  
  26. .wp-geshi-highlight li {
  27.     padding-left: 2px;
  28.     font-family: monospace;
  29.     font-size: 12px;
  30.     list-style: decimal !important;
  31.     }
  32.  
  33. .wp-geshi-highlight {
  34.     padding: 0px;
  35.     margin: 2px 0 30px 0;
  36.     overflow-x: auto;
  37.     border: 1px solid #ccc;
  38.     background-color: #e7e5dc !important;
  39.     box-shadow: 0 8px 7px -10px #CCC, 0 -8px 7px -10px #CCC;
  40. }
  41.  
  42. /* Enforce background-color in some non-official themes when using numbering */
  43. .wp-geshi-highlight div ol li{
  44.   line-height: 25px;
  45.   border-left: 2px solid #6ce26c;
  46.   padding-left: 10px;
  47. }
  48. .wp-geshi-highlight div ol li:nth-of-type(odd) {
  49.     background-color: #f8f8f8;
  50. }
  51. .wp-geshi-highlight div ol li:nth-of-type(even) {
  52.     background-color: #fff;
  53. }

编辑器中添加代码高亮快捷键按钮

样式和功能都不错,但是用的时候发现不是很方便,每次想插入代码的时候都要重复的写一遍格式的代码,太麻烦了,所以就想到直接在编辑器上添加一个快捷按钮(按钮是在文本编辑模式才有的哦),用的时候点击一下,自动添加到编辑器,我们只需要修改一样lang属性就行了。实现这个也很简单,把下面的代码放到您主题的functions.php文件就行了。

  1. // 编辑器添加HTML按钮
  2. function appthemes_add_quicktags() { ?> 
  3. <script type="text/javascript"> 
  4. QTags.addButton( '代码高亮', '代码高亮', '<pree lang="html" line="1" escaped="true" >这里添加代码,注意修改一下语言属性(lang="html")</pree>');
  5. </script>
  6. <?php } 
  7. add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

注意把上面的pree换成pre