WP-GeSHi-Highlight 样式自定义

2024-01-19 15:59 小编

WordPress大学 目前已经更换了 WP-GeSHi-Highlight ,自带的高亮效果已经很不错了。如果你不满意自带的效果,WP-GeSHi-Highlight 插件目录下有一个 wp-geshi-highlight.css 文件,只需将这个文件复制到你当前所用的主题根目录,然后修改里面的css代码即可。这样一来,即使更新 WP-GeSHi-Highlight 插件,也不会丢失你的自定义样式了。

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

/*   Copyright 2009-2014, Jan-Philip Gehrcke (http://gehrcke.de)    Simplistic styling. Tested with TwentyTwelve, TwentyThirteen and   a number of custom themes in modern versions of Firefox (27) and Chrome (33).   An absolute font size set for pre, span, li (within highlight container)   is the safest solution for proper code display, especially in Chrome.    I tried to set all relevant styles. However, certain themes might define   styles affecting the code display (it is difficult to anticipate these cases,   so I expect this to happen). In these cases, you need to identify   the corresponding selectors and override your theme's styles via this file   (wp-geshi-highlight.css), placed in your theme's directory.*/.wp-geshi-highlight pre, .wp-geshi-highlight span {    overflow: visible;    margin: 0;    padding: 0;    border: none;    box-shadow: none;    background: none;    font-size: 14px;    font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,'Lucida Console', monospace;    word-wrap: normal; /* Otherwise Chrome wraps lines */    white-space: pre;} .wp-geshi-highlight ol {    margin: 0;    padding: 0;} .wp-geshi-highlight ol > li {    position: relative; /* Create a positioning context */    margin: 0 0 0 30px; /* Give each list item a left margin to make room for the numbers */} .wp-geshi-highlight li {    padding-left: 5px;    font-family: monospace;    font-size: 14px;    border-left: 1px solid #eee;} .wp-geshi-highlight {    padding: 0 0 0 15px;    margin: 2px 0 30px 0;    overflow-x: auto;    border-bottom: 1px solid #ccc;    border-top: 1px solid #ccc;    background-color: #f8f8f8;    box-shadow: 0 8px 7px -10px #CCC, 0 -8px 7px -10px #CCC;}


在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码