桌面版 | WordPress无插件代码高亮解决方案-CodeRenderUnmi

沃森博客 2017年11月20日00:15:05web大杂烩评论506阅读模式

在博客刚上线的时候,博主选择代码高亮方式时犹豫了好久。当时想到考虑代码怎么高亮?用插件方式还是非插件代码高亮?用哪个插件实现代码高亮?在不用插件时会不会乱码等等一系列问题。当时也使用了SyntaxHighlighter高亮插件,功能强大用着确实不错,但有个不好就是体积庞大,导致页面加载速度下降;依赖性也强,如果不用这插件了,所有显示代码的部分就会产生错乱;所以最后还是决定用无插件版的代码高亮方案,虽然用起来麻烦点,但相比上面的两个不足也是值得了。

桌面版 | WordPress无插件代码高亮解决方案-CodeRenderUnmi

CodeRenderUnmi介绍

本地转换代码高亮显示的小工具:CodeRenderUnmi

本程序是基于 dp.SyntaxHighlighter 写的代码语法着色的工具。

支持的着色语言为:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi

可以加入更多语种的支持,本程序就是在 dp.SyntaxHighlighter 的基础上扩展了对 Perl 语言的支持,网上可以找到相应语法的 JS 代码和 CSS。语言扩展支持通过在 shCore.js 和 highlight.css 加入相应代码即可。

实现原理

首先在网页中部署相应的CSS文件,或者直接整合到自己的CSS文件中。然后使用桌面版的软件,将代码复制并转换,软件会自动为代码添加对应的样式标签,最后发布在网页上即为着色完成的代码了。

界面介绍

操作很容易,Source Code 中贴上你要着色的代码,然后选择语种,点击 Render(转换) 按钮就会在 HTML Code 中生成相应的 HTML 代码,同时在 HTML Preview 中可以预览到效果。

桌面版 | WordPress无插件代码高亮解决方案-CodeRenderUnmi

简要说明:Lang 下拉框可以选择所支持的语法,Options 右边的 Gutter(显示行号)、Controls(工具栏)、CollapseAll(折叠)、FirstLine(起始为1)、Columns(显示列数) 是控制生成的额外的元素,逐一点试试就知道了。每个内容显示(输入)区都提供了 Copy/Paste/Clear 快捷操作链接,还有一个总的 Clear 按钮。

Copy生成 的HTML 代码,在日志编辑窗口切换到HTML源代码编辑模式,粘贴就可以了。

不过要想正确显示代码高亮还需在WordPress主题中加载样式文件“highlight.css”(在下载的压缩包中)。

安装使用CodeRenderUnmi方法

一、部署css文件

首先下载压缩包,解压后,里面有5个文件。

CodeRender.hta(hta网页主程序,可以直接运行)

CodeRender.ico(图标文件)

highlight.css(样式文件)

readme.txt(说明文档)

shCore.js(着色动作脚本)

其次,把highlight.css上传到所使用主题目录中;

最后,打开header.php,查找:

  1. <link?rel="stylesheet"?type="text/css"?href="<?php?bloginfo('template_directory');??>/style.css"?/>

在后面添加:

  1. <link?rel="stylesheet"?href="<?php?bloginfo('template_url');??>/highlight.css"?/>

当然,你也可以复制highlight.css中的所有代码到你主题style.css中,或者直接把这个文件复制到网站目录,并在头部引用该文件,以上步骤就免了!文件大小6KB,内含有各种语言的着色样式,如果确信自己不会用到的语言,可以把对应的CSS代码删掉,可以通过判断CSS的命名判断语言类型。

注意:WordPress程序默认会把半角符号替换为全角,这样一来,别人复制你的代码就不能用了。可以在WordPress主题后台的function.php中添加这样的代码,关掉这个功能。要放在<?php和?>之间。

  1. remove_filter('the_content', 'wptexturize');

二、代码转义操作

使用的时候,需要打开CodeRender.hta,然后在Source Code栏中贴上代码,Lang选择对应的代码类型,点击Render之后,在HTML Code 会显示HTML源码,HTML Preview 会显示预览效果,而option中的选项,只要点一下,在预览看一下就知道是什么意思了。编辑文章的时候,只要复制HTML源码,然后粘贴到博客的源码编辑模式下,就可以使用了。

 

样式修改建议

为适应响应式网页,避免产生左右滑动条,可以设置自动换行。

.dp-highlighter ol li, .dp-highlighter .columns div增加word-wrap: break-word; word-break: normal;

 

下载地址

注:使用IE核心浏览器复制代码时会将行号一起复制下来,使用火狐、chrome等浏览器则不会。

沃森博客
  • 本文由 发表于 2017年11月20日00:15:05
  • 本文来自互利网收集整理,问题反馈联系邮箱:wosnnet@foxmail.com,转载请务必保留本文链接:https://wosn.net/792.html

发表评论