给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js
来源:互联网 发布:淘宝不能使用图片搜索 编辑:程序博客网 时间:2024/05/17 00:13
经常在一些大神博客里面看到非常好看的高亮代码,有sublime风格,GitHub风格等等。毫无疑问,好的高亮代码插件可以不仅仅让你的博文显得更高大上,更重要的是舒适的阅读体验。经过我在网上的一番搜罗,终于找到了一款非常赞的高亮插件,先来看看效果吧!
1.Javascript 效果
//检测URLfunction checkeUrl(url){ return new RegExp("^(https|http|ftp|rtsp|mms)://[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|]", 'g').test(url);};//控制台打印window.console = window.console || { log : function(){}};
2.Java代码
public interface UserDao { /** * * 根据用户对象检索用户信息 * @param user * @return User * @see [类、类#方法、类#成员] */ public User getUser(User user); /** * 更新用户信息 * @param user * @return int */ public int updateUser(User user);}
更多高大上的效果,sublime,googlecode大家可以戳这里:http://highlightjs.org/static/test.html
使用方法:
准备工作:
插件使用非常简单,只需要在你要使用插件的页面引入highlight.js.和相应代码风格的Css样式文件即可。例如我这里采用的风格为:
Solarized - Dark,那么我引入了这个css样式文件:http://highlightjs.org/static/styles/solarized_dark.css
页面显示端,看下面的实例代码:
//在页面中添加初始化脚本<script> hljs.configure({tabReplace: ' '}); hljs.initHighlightingOnLoad();</script>//需要高亮显示的代码需要用<pre><code class="language"></code></pre>标签括起来,//其中language为要显示代码是什么语言,例如要显示Java代码则是class="java",//html代码则是class="xml"<pre> <code class="xml"> //详细代码 </code></pre>
在博客园中使用:
在博客后台设置中添加上JS脚本引用和初始化脚本,把要应用的代码风格css样式Copy到页面定制CSS代码中,保存。
然后在每次写博文时,添加完代码后,切换为HTML编辑状态,把代码部分稍作修改,把原来的pre class去掉,然后在里面加上code标签以及code class即可。
插件官网地址:http://highlightjs.org/
赶紧去试试吧,小伙伴们!!
作者:Ziv小威
出处:http://www.cnblogs.com/zivxiaowei/
关于作者:专注于Java技术的程序员一枚,此外对JS开发保持着较高的兴趣。爱好音乐,阅读,FM等等。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
如有问题,可以邮件:wewoor@foxmail.com
微博:Ziv小威
- 给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js
- 代码语法高亮插件highlight.js
- 给大家推荐一款Sublime Text的主题”brogrammer-theme“
- 代码文本Highlight - 高亮插件
- 代码高亮显示库-highlight.js
- sublime插件Syntax Highlight:使vue高亮,效果不错
- FCKeditor基于SyntaxHighlighter 的代码语法高亮插件(Code Syntax Highlight Plugin for FCKeditor)
- 高大上的优质JS代码写法
- 让sublime text3支持Vue语法高亮显示 1.准备语法高亮插件vue-syntax-highlight。 下载地址: https://github.com/vuejs/vue-synt
- 一款sublime很棒的代码格式化插件
- 推荐一款好用的代码编辑器——sublime text 2
- WordPress 代码高亮插件 WP-GeSHi-Highlight
- 推荐一款js插件
- 推荐一款GitHub超实用的可视化代码树插件:Octotree
- Ghost本地安装highlight.js使代码高亮
- 给大家推荐一款测试数据生成工具(开源的)
- 给大家推荐一款应用 必定是你想要的
- 给大家推荐几个NotePad++的插件
- Spring dao框架——jdbc模板批量操作
- 1/50 《Programming in Objective-C》
- main函数同时打印if和else中的内容
- CSting 函数大全
- Graphviz的使用及中文乱码问题
- 给大家推荐一款高大上的代码高亮插件(sublime,github风格)——highlight.js
- Spring 查询中怎样使用RowMapper
- 文件上传控件plupload的runtimes问题整理(html4、silverlight)
- 天使监临人间
- U盘丢失照片怎么找回
- Page_Load Page_Init方法使用原理 Page 添加 事件
- Layout整理
- float和double类型的内存分布和比较方法收藏
- 独家:文章马伊琍全家密会编剧 或开始谋划新作