WordPress代码高亮插件 WP-GeSHi-Highlight

一、WP-GeSHi-Highlight 代码书写格式

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

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

二、WP-GeSHi-Highlight 样式自定义

WP-GeSHi-Highlight 插件目录下有一个 wp-geshi-highlight.css 文件,只需将这个文件复制到你当前所用的主题根目录,然后修改里面的css代码即可。这样一来,即使更新 WP-GeSHi-Highlight 插件,也不会丢失你的自定义样式了。也可以直接修改这个CSS,在wordpress-插件-已安装插件-编辑-wp-geshi-highlight.css,也可以修改好上传到插件目录WP-GeSHi-Highlight下,但这样已更新必须重新再改写,建议第一种方法。

三、wp-geshi-highlight.css 修改说明

以下就是511遇见目前使用的样式,如果你需要,可以用来覆盖 wp-geshi-highlight.css 原有代码即可。

  1.  /*
  2.    Copyright 2009-2015, Jan-Philip Gehrcke (http://gehrcke.de)
  3. */
  4. .wp-geshi-highlight pre, .wp-geshi-highlight span {
  5.     overflow: visible;
  6.     margin: 0 !important;
  7.     padding: 0;
  8.     border: none;
  9.     box-shadow: none;
  10.     background-color: #f8f8f8;/*背景颜色*/
  11.     font-size: 14px !important;/*字体大小*/
  12.     line-height: 28px !important;
  13.     font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,
  14.                 'Lucida Console', monospace;
  15.     word-wrap: normal; /* Otherwise Chrome wraps lines */
  16.     white-space: pre;/*可以删掉了*/
  17.     white-space: pre-wrap;/*自动换行*/
  18.     word-wrap: break-word;/*自动换行*/
  19. }
  20. .wp-geshi-highlight ol {
  21.     margin: 0 !important;
  22.     padding: 0 !important;
  23.     list-style: decimal !important;
  24.   }
  25. .wp-geshi-highlight ol > li {
  26.     position: relative; 
  27.     margin: 0 0 0 40px; 
  28. }
  29. .wp-geshi-highlight li {
  30.     padding-left: 5px;
  31.     font-family: monospace;
  32.     font-size: 14px;
  33.     list-style: decimal !important;
  34.     border-left: 1px solid #eee;/*数组序列和内容的分割线*/
  35.     }
  36. .wp-geshi-highlight {
  37.     padding: 0 0 0 15px;
  38.     margin: 2px 0 30px 0;
  39.     overflow-x: auto;
  40.     border-bottom: 1px solid #ccc;/*上边线样式*/
  41.     border-top: 1px solid #ccc;/*下边线样式*/
  42.     background-color: #f8f8f8;/*背景颜色*/
  43.     box-shadow: 0 8px 7px -10px #CCC, 0 -8px 7px -10px #CCC;
  44. }
  45. /* Enforce background-color in some non-official themes when using numbering */
  46. .wp-geshi-highlight div ol li{
  47.     background-color: #fdfdfd;
  48. }

四、WP-GeSHi-Highlight 下载安装

在 WordPress后台插件安装界面搜索 WP-GeSHi-Highlight 即可在线安装,或者在这里下载 WP-GeSHi-Highlight

需要了解更多用法和帮助,请访问https://gehrcke.de/wp-geshi-highlight/


发布日期:

所属分类: Wordpress, Wordpress 插件 标签: