给代码高亮插件WP-Code-Highlight换个代码样式,看起来更漂亮点
前言
熟悉本站的都知道,本网站的代码高亮一直是采用WP-Code-Highlight这个插件,关于这个插件,本站也发过几篇文章
WordPress代码高亮插件:WP Code Highlight
修改WP-Code-Highlight插件支持自动换行
但是前几天有朋友说我的代码高亮不漂亮,看了下自己的代码高亮确实不漂亮,所以仿照大前端D8主题给自己换个样式。
样式代码
.prettyprint, pre.prettyprint { background-color: #272822; border: none; overflow: hidden; padding: 10px 15px; } .prettyprint.linenums, pre.prettyprint.linenums { -webkit-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741; -moz-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741; box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741; } .prettyprint.linenums ol, pre.prettyprint.linenums ol { margin: 0 0 0 33px; } .prettyprint.linenums ol li, pre.prettyprint.linenums ol li { padding-left: 12px; color: #bebec5; line-height: 20px; margin-left: 0; list-style: decimal; } .prettyprint .com { color: #93a1a1; } .prettyprint .lit { color: #AE81FF; } .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #F8F8F2; } .prettyprint .fun { color: #dc322f; } .prettyprint .str, .prettyprint .atv { color: #E6DB74; } .prettyprint .kwd, .prettyprint .tag { color: #F92659; } .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var { color: #A6E22E; } .prettyprint .pln { color: #66D9EF; }
使用方法
将上段CSS代码覆盖掉插件的默认样式文件wp-code-highlight.css
,就可以了,还有插件最好不要开启行号,可能会和主题样式有冲突。
代码演示
HTML
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> </body> </html>
PHP
<?php function wp_code_highlight_admin() { add_options_page('WP Code Highlight Options', 'WP Code Highlight','manage_options', __FILE__, 'wp_code_highlight_options'); add_action('admin_init','wp_code_highlight_register'); } function wp_code_highlight_register(){ register_setting('wch-settings','wp_code_highlight_button'); register_setting('wch-settings','wp_code_highlight_themes'); register_setting('wch-settings','wp_code_highlight_line_numbers'); register_setting('wch-settings','wp_code_highlight_deactivate'); } function wp_code_highlight_options(){ ?> <div class="wrap"> <?php screen_icon(); ?> <h2>WP Code Highlight</h2> <form action="options.php" method="post" enctype="multipart/form-data" name="wp_code_highlight_form"> <?php settings_fields('wch-settings'); ?> <table class="form-table"> <tr valign="top"> <th scope="row"> <?php _e('Code Button','WP-Code-Highlight'); ?> </th> <td> <label> <input name="wp_code_highlight_button" type="radio" value="enable"<?php if (get_option('wp_code_highlight_button') == 'enable') { ?> checked="checked"<?php } ?> /> <?php _e('enable','WP-Code-Highlight'); ?> </label> <label> <input name="wp_code_highlight_button" type="radio" value="disable"<?php if (get_option('wp_code_highlight_button') == 'disable') { ?> checked="checked"<?php } ?> /> <?php _e('disable','WP-Code-Highlight'); ?> </label> </td> </tr> <tr valign="top"> <th scope="row"> <?php _e('Highlight Themes','WP-Code-Highlight'); ?> </th> <td> <label> <input name="wp_code_highlight_themes" type="radio" value="wp-code-highlight"<?php if (get_option('wp_code_highlight_themes') == 'wp-code-highlight') { ?> checked="checked"<?php } ?> /> wp-code-highlight </label> </td> </tr> <tr valign="top"> <th scope="row"> <?php _e('Line Numbers','WP-Code-Highlight'); ?> </th> <td> <label> <input name="wp_code_highlight_line_numbers" type="radio" value="enable"<?php if (get_option('wp_code_highlight_line_numbers') == 'enable') { ?> checked="checked"<?php } ?> /> <?php _e('enable','WP-Code-Highlight'); ?> </label> <label> <input name="wp_code_highlight_line_numbers" type="radio" value="disable"<?php if (get_option('wp_code_highlight_line_numbers') == 'disable') { ?> checked="checked"<?php } ?> /> <?php _e('disable','WP-Code-Highlight'); ?> <code>注意:启用行号的话,你可能需要调整你的WordPress主题风格.</code> </label> </td> </tr> <tr valign="top"> <th scope="row"> <?php _e('Delete Options','WP-Code-Highlight'); ?> </th> <td> <label> <input type="checkbox" name="wp_code_highlight_deactivate" value="yes" <?php if(get_option("wp_code_highlight_deactivate")=='yes') echo 'checked="checked"'; ?> /> <?php _e('Delete options while deactivate this plugin.','WP-Code-Highlight'); ?> </label> </td> </tr> </table> <p class="submit"> <input type="submit" class="button-primary" name="Submit" value="<?php _e('Save Changes'); ?>" /> </p> </form> <h3>基本使用</h3> 1. (可以考虑)控制面板——用户资料——取消可视化编辑器<br /> 2. 控制面板——设置——代码高亮<br /> 3. 使用 <code><pre></code> and <code></pre></code>标签包围代码即可实现代码高亮 (放心,在html编辑器会有按钮的)<br /> 4. 不需要注明代码语言种类<br /> 5. 这也可以从目前的WordPress主题目录加载<code>wp-code-highlight.css</code>文件<br /> 6. 支持代码自动换行!!(修改) <h3>使用范例</h3> <code><pre></code><br /> <?php<br /> echo "Hello World";<br /> ?><br /> <code></pre></code> <br> <h3>其他问题</h3> <input type="button" style="cursor : help;" value="还有更多关于代码高亮的问题?" onclick="window.open('https://gitcafe.net/tag/%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE')"> <?php } add_action('admin_menu', 'wp_code_highlight_admin'); ?>
Javascript
// ==UserScript== // @name Lap // @author googleGuard // @version 1.2 // @include http://tieba.baidu.com/p/* // @include http://imgsrc.baidu.com/* // @include http://imgsrc.baidu.com/* // @include http://*photos.baidu.com/* // @include http://*photos.bdimg.com/* // @include http://tb.himg.baidu.com/* // @run-at document-end // @grant none // ==/UserScript== lapList = { '六花': { width: 200, height: 210, repeat: 0, //循环次数,0无限循环 delay: 0, //每帧间隔,毫秒 layer: [ [ {src: 'http://imgsrc.baidu.com/forum/pic/item/5882b2b7d0a20cf4c463b28f75094b36adaf99eb.jpg'}, {x: 40, y: 50, w: 60, h: 60, src: '[FACE]'}, ], [ {src: 'http://imgsrc.baidu.com/forum/pic/item/6f061d950a7b0208def170b161d9f2d3572cc8a2.jpg'}, {x: 120, y: 80, w: 60, h: 60, src: '[FACE]'}, ], [ {src: 'http://imgsrc.baidu.com/forum/pic/item/e4dde71190ef76c6a806b77b9e16fdfaae51678d.jpg'}, {x: 95, y: 140, w: 60, h: 60, src: '[FACE]'}, ], [ {src: 'http://imgsrc.baidu.com/forum/pic/item/b58f8c5494eef01f23995495e3fe9925bd317dd4.jpg'}, {x: 15, y: 150, w: 60, h: 60, src: '[FACE]'}, ], [ {src: 'http://imgsrc.baidu.com/forum/pic/item/b8389b504fc2d5628ffa9cbde41190ef77c66ceb.jpg'}, {x: 0, y: 100, w: 60, h: 60, src: '[FACE]'}, ], ] },
后语
目前这款插件是我最喜欢的代码高亮插件,只是样式比较弱,但是加入这段代码之后,插件最大的弱点也没了,赞 😳 😳 😳
-- 完 --
支持,不错
@李建林博客 是挺喜欢的
用的自带的 哈哈
@atests 自带有一点问题
前來支持一下~我比較喜歡Crayon高亮
@超級efly 毕竟太肥