专注人工智能在金融领域的应用

不用插件实现WordPress代码高亮显示

最近给自己的WordPress博客增加了代码高亮显示功能。网上有很多代码高亮显示编辑器插件,但经过试用发现存在于主题不兼容情况,并且万一某天不用插件了,页面可能会很乱。其实大部分插件都是在代码中强行加入一些标签,然后用CSS定义样式,通过查看页面源文件可以清楚地看到。

因此,放弃了使用代码高亮插件,使用修改css样式增加代码高亮功能。现分享给大家。

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

下载地址:http://yunpan.cn/cyDHDsDTDVUx3  提取码 b5aa

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

java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi。

在线代码高亮转换

可方便用于你的博客中粘贴代码,只要自定相应的样式 (highlight.css 的内容,.Text 支持自定义样式或在模板里加上语法样式),然后复制用这个工具生成的 HTML 代码就能让你的代码着高亮显示。 可以加入更多语种的支持,本程序就是在 dp.SyntaxHighlighter 的基础上扩展了对 Perl 语言的支持,网上可以找到相应语法的 JS 代码和 CSS。语言扩展支持通过在 shCore.js 和 highlight.css 加入相应代码即可。

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

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

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

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

方法:

首先,把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中,以上步骤就免了!

如认为默认的样式不符合自己的要求,可以通过修改“highlight.css”中的样式改变代码高亮、边框、背景等颜色,更个性化。

以下是本博客使用后显示的效果:

 

  1. public List<T> lRange(final Serializable key, final long begin,   
  2.             final long end) {   
  3.   
  4.         return redisTemplate.execute(new RedisCallback<List<T>>() {   
  5.             @Override  
  6.             public List<T> doInRedis(RedisConnection connection)   
  7.                     throws DataAccessException {   
  8.   
  9.                 byte[] key_ = RedisUtil.getBytesFromObject(key);   
  10.   
  11.                 List<byte[]> bytes = connection.lRange(key_, begin, end);   
  12.   
  13.                 List<T> resultList = new ArrayList<T>();   
  14.   
  15.                 Iterator<byte[]> itr = bytes.iterator();   
  16.   
  17.                 while (itr.hasNext()) {   
  18.                     byte[] byte_ = itr.next();   
  19.                     T value;   
  20.                     try {   
  21.                         value = (T) RedisUtil.getObjectFromBytes(byte_);   
  22.                         resultList.add(value);   
  23.                     } catch (IOException e) {   
  24.                         logger.error(e);   
  25.                     } catch (ClassNotFoundException e) {   
  26.                         logger.error(e);   
  27.                     }   
  28.                 }   
  29.                 return resultList;   
  30.             }   
  31.         });   
  32.     }  
点赞

发表评论

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

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>