代码高亮插件WP-Code-Highlight 样式美化

by Posted onWordPress

给代码高亮插件WP-Code-Highlight换个代码样式，看起来更漂亮点

代码高亮插件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]'},
			],
		]
	},

后语

目前这款插件是我最喜欢的代码高亮插件，只是样式比较弱，但是加入这段代码之后，插件最大的弱点也没了，赞 😳 😳 😳

-- 完 --

Published by 云落

无折腾，不生活，我是一个WordPress菜鸟，一个玩淘宝的卖家，欢迎你认识我，我是云落！

发表评论

电子邮件地址不会被公开。 必填项已用*标注

6 Replies to “代码高亮插件WP-Code-Highlight 样式美化”