• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

WordPress 云落 3年前 (2014-11-14) 746次浏览 已收录 6个评论
文章目录[隐藏]

给代码高亮插件 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://googlo.me/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]'},
			],
		]
	},

后语

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


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:代码高亮插件 WP-Code-Highlight 样式美化
喜欢 (8)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 支持,不错
    李建林博客2014-12-05 17:29 回复 Windows 7 | Chrome 31.0.1650.63
    • 云落
      是挺喜欢的
      云落2014-12-05 21:56 回复 Android 4.4.4 | WordPress客户端 android
  2. 用的自带的 哈哈
    atests2014-12-04 01:09 回复 Windows 8.1 | Chrome 38.0.2125.122
    • 云落
      自带有一点问题
      云落2014-12-04 02:35 回复 Android 4.4.4 | WordPress客户端 android
  3. 前來支持一下~我比較喜歡Crayon高亮 :mrgreen:
    超級efly2014-11-16 13:28 回复 Mac OS X | Chrome 38.0.2125.122
    • 云落
      毕竟太肥
      云落2014-11-16 14:13 回复 Windows 8.1 | Firefox浏览器 31.0