支持html-xml-css-js语法高亮代码插件:DlHighlight
发布在css研究2014年9月8日view:5099
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

中秋节到了

今天是中秋节,先祝大家节日快乐。听说今天群主发月饼,我看见可开心了,听说还是历史上第一个博客发月饼的群猪。我很想问问群主:

交个朋友

打个小ad,扫扫下面二维码,各种姿势现在在恶补中,希望喜欢前端的一起学习。

对于写各种demo

对于网上现在有很多的代码托管服务器商,最著名当属 github。 其实搜索一下便会出现一大堆的关于在线编辑器的网站,可以在线敲上代码就可以在右窗口实时预览,真是多么方便,下面我所知道的几个:

1.Runjs
2. CodePen
3. Jsfiddle
4. Dabblet

工具只是方便我们服务的,很多时候给我们带来很大的便利,这点是毋庸置疑的。不过也有时让我们感到难过,比如说我就是想要自己写一个小demo,功能不多,就是几行html和css、js所以根本不需要去在线编辑输入自己需要的代码,然后在 share 给需要观看的用户。

最重要的分享的时候还需要加载外部的css和各种js,比如下图

在线代码编辑器runjs

哪天假如对方服务器的某个零部件掉了,正好是又是涉及到我们相关代码的。本来想要看你写的小demo,结果加载老半天出不来,出来的还是打叉叉的,有些看客会直接不耐烦

看你发的破图

是等同的道理,所以为了减少不必要的外部加载,我的个人建议是能少用就少用。当然你用也可以,毕竟这东西实时预览,方便的很。下面来说说这款语法代码插件:DlHighlight

DlHighlight语法高亮代码

其实一开始我是不懂的,因为受到了鑫哥的影响,他的每一个demo都会用到这个DlHighlight语法高亮插件,请猛戳这里:两个技术名称并存demo 你可以在左窗口右键需要审查的元素,查看需要的代码,就会惊奇的发现,代码是如此简单,而且不需要复杂的技术,轻轻松松就是一个 pre 就搞定了所以的代码样式,如图所示

DlHighlight

难道这还不比你一个劲去在上面这些在线编辑器实时输入代码还要分享得到地址在 CTRL+V 方便?下面我来说说这个插件所需要的一些代码,以及一些样式优化。

DlHighlight 用法

在说明用法之前先介绍这款插件,这是插件的官网:DlHighlight 这是07年就已经出的插件,目前仅支持JavaScript、CSS、XML、HTML 这4语法高亮。假如你需要PHP神马之类的也可以呵呵,然后就带过。

用法:
1. 先下载官方 hl_all.jsstyle.css 并引入到文档中;
2. 然后body插入代码js

<script type="text/javascript">
DlHighlight.HELPERS.highlightByName("code", "pre");
</script>
3. 最后一步就是直接需要用的地方写 pre 标签附上属性值 name="code" class="css/js/html/xml css类是什么就写什么,比如我是写的css,那就直接css='css'即可"

js截图

css截图

官方给出的代码界面确实不怎么好看,你可以自己修改css相关中的样式,比如说可以根据想dw的样式来安排,怎么舒服怎么来,下面是鑫哥的代码,我用上了,不过我把伪类元素的样式改了

假如你很懒,那么可以直接插入以下代码:

<link rel="stylesheet" type="text/css" href="http://xiaoho.com/demo/hl.css">
<script type="text/javascript" src="http://xiaoho.com/demo/hl_all.js"></script>
<script type="text/javascript">DlHighlight.HELPERS.highlightByName("code", "pre");</script>

下面是我改的一个黑色RMark样式的,喜欢的可以拿去,不客气,请叫我红领巾qq标签

RMark

更多效果,你可以狠狠猛戳:RMark样式语法高亮demo

结语

更多样式等你去发掘,请发挥你强大的脑力,就这样吧,中秋快乐,先去蹭饭吃。

看过之后,你有什么想法呢?欢迎在评论说出你的想法。

本文地址:http://xiaoho.com/?p=726
原创文章,转载请注明来自:◎前端路人乙xiaoho.com

评论
发表评论
暂无评论
WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏