返回首页
当前位置: 主页 > 网络编程 > 其他实例教程 >

教你使用SyntaxHighlighter高亮插件图文教程

时间:2013-09-13 01:26来源:知行网www.zhixing123.cn 编辑:麦田守望者

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文件夹里同样准备了很多高亮样式,可根据喜好设置。

------分隔线----------------------------
标签(Tag):Wordpress wordpress模板 wordpress教程 wordpress技巧 wordpress插件
------分隔线----------------------------
推荐内容
猜你感兴趣