WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › Syntax Highlighter – 免插件实现WP文章代码高亮

Syntax Highlighter – 免插件实现WP文章代码高亮

PCDotFan10年前

 

Syntax Highlighter - 免插件实现WP文章代码高亮-WP酷

SyntaxHighlighter是一个非常不错的代码高亮工具,支持各种平台,只需要前台载入代码即可。这里顺便放出一个比较漂亮的美化版。

版本比较旧,2.0.320版本的,但个人认为好用就够了。这版本是单个JS文件支持大部分语言的,不像官方版本要单个语言单个JS调用的,方不方便就见仁见智了。

 

1.下载必要文件

所有必需的文件我已经打包好了,点此下载

然后,如果你懂CSS,可以修改包内shThemesDefault.css,改成自己喜欢的样式。默认样式的示例如下:(美化样式代码来自M4)

Syntax Highlighter - 免插件实现WP文章代码高亮-WP酷

 

在shThemeDefault.css第一行

.syntaxhighlighter {margin: 0 0 14px 0;background-color: #F7F7F7 !important;}

中追加一个

.syntaxhighlighter {margin: 0 0 14px 0;background-color: #F7F7F7 !important;word-wrap: break-word;}

 

可阻止代码溢出

 

 

2.上传

在主机主目录新建一个名为code的文件夹(别的路径也没问题,注意代码修改下),然后把压缩包里所有文件放到code目录里。

 

3.调用

复制下面的代码到主题的footer.php(header也没关系,只要能载入就行)

<script type="text/javascript" src="http://ben-lab.com/code/shCore-min.js"></script>
<script type="text/javascript" src="http://ben-lab.com/code/shBrushAll-min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ben-lab.com/code/shThemeDefault.css" />
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://ben-lab.com/code/clipboard.swf';
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();
</script>

(把上面ben-lab.com改成自己的域名)

那么,现在要怎么发代码呢,

按照这样的格式贴代码,就能在前台看到效果了

<pre class="brush:php;"></pre>

 

4.设置

有两种方法,一种是直接调整所有代码高亮块,另一种是单个调整。这里先给出所有配置项的列表及内容:

SyntaxHighlighter.config 全局配置,不支持单个代码块的调整

名称默认值介绍
bloggerModefalse如果博客在blogger托管,就必须把这个设为true
stringsObject官方介绍说“允许您更改默认的消息,在这里看到更多细节”
stripBrsfalse设为true可以自动去掉代码里的<br/>标签
tagName“pre”更改自动识别的标签,如果改成p就会识别段落里的代码

 

在刚才放footer的代码下面接着,像这样设置:

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

上面演示了启用blogger模式,自己一条条添加规则就行了

 

SyntaxHighlighter.defaults 单个调节

名称默认值介绍
auto-linkstrue自动给代码里的网址加链接(默认已打开)
class-name‘ ‘定义CSS,详细看DEMO
collapsefalse设为true自动收缩代码块,点击才打开
first-line1设定第一行的的行号,如果设为10即行号从10开始
guttertrue打开或关闭行号显示
highlightnull例子:设定[2,3],可以高亮2和3行。设定4,单独高亮第4行
html-scriptfalse这个可以让代码块里面的HTML代码不执行,前提是要特别下载一个shBrushXml.js并载入。请自行到官网找。
smart-tabstrue谁可以告诉我这货用来作甚!
tab-size4更改空格的宽度
toolbartrue开关工具栏,就是右上角那个

 

1.全局调整:方法同上

SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
<!-- 一条条添加 -->
SyntaxHighlighter.all();

 

2.单个调整:把刚才的<pre></pre>改改

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>
#Syntax Highlighter#免插件
0
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (1)
再想想
  • cy

    看起来,博主目前用的代码高亮就是 用的这个东东么?

    9年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WordPress 获取文章中第一个链接
9年前
WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
6年前
WordPress自定义个性化文章版权声明
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1