一步步教你使用SyntaxHighlighter高亮插件(图)

Other 2012-07-03 SyntaxHighlighter,高亮

SyntaxHighlighter是一款众多网站首选使用的高亮插件,网上有许多教程由于是讲到了跟编辑器的搭配使得原本简单易用的插件变成非常复杂,其实这款插件使用方法非常的简单,只需跟着教程一步步即可实现高亮。

一、下载插件

SyntaxHighlighter有一个官网下载地址,童鞋们可以点击这个地址下载:http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

二、解压提取高亮JS文件与CSS样式文件

选中scripts目录与styles目录

一步步教你使用SyntaxHighlighter高亮插件

复制到桌面syntax文件夹中

一步步教你使用SyntaxHighlighter高亮插件

三、使用插件

创建demo.html文件

一步步教你使用SyntaxHighlighter高亮插件

在demo.html文件里写入以下代码并保存

一步步教你使用SyntaxHighlighter高亮插件

运行结果

一步步教你使用SyntaxHighlighter高亮插件

 

最后

通过以上的例子,我们发现使用SyntaxHighlighter这个插件并不难,只是加载JS与CSS文件即可,并不需要复杂的安装。

以上DEMO中的shCore.js是必须加载的主要JS文件,shBrushPhp.js文件是PHP语法高亮,SyntaxHighlighter在scripts文件夹里准备了很多语法高亮文件,如CSS,JS,XML/HTML等等,可实际中根据自己需要加载。shCoreDefault.css是高亮样式,SyntaxHighlighter在styles文件夹里同样准备了很多高亮样式,可根据喜好设置。

本例DEMO下载[琼台博客]一步步教你使用SyntaxHighlighter高亮插件.rar

文字链接:《一步步教你使用SyntaxHighlighter高亮插件(图)

文章地址:http://www.qttc.net/201207116.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 2

  • 你这个图片显示提取等待状态功能不错哦!
    2012-07-03 23:40:51 [ 跟帖 ]
    其实就是一懒加载,把真实图片替换等待图片而已
    2012-07-04 09:09:41 [ 跟帖 ]
    1 #