本文将向你介绍使用syntaxhighlighter语法高亮插件复制代码不会自动换行的问题。
以前我用的是syntaxhighlighter3.0.8版本,本想着高版本,在优化和加载速度方面会略胜一筹,但经过实践检验,其实不然!于是决定回到经典的2.1版本,一切都调试就绪,正要上线时却发现只要从语法高亮插件syntaxhighlighter起作用的地方,其代码复制后都不会换行,代码全重堆叠在一起,很难阅读,网上看了别人syntaxhighlighter也有同样问题,去官网也查了说是Bug,那就没办法了吗?后来发现别人的虽直接复制代码是乱码,但在代码区的右上我会显示一个小小的浮动工具栏,这个工具栏提供有代码复制功能,而且可以换行,于是研究别人源码是怎么实现。框架资源分享
原来syntaxhighlighter已经为我们提供了解决方案,那就是使用clipboard.swf文件,它就是那个悬浮的工具栏,是Flash格式的,像这样引入这些文件:
1 |
< link type = "text/css" rel = "stylesheet" href = "syntaxhighlighter/styles/shCore.css" />
|
2 |
< link type = "text/css" rel = "stylesheet" href = "syntaxhighlighter/styles/shThemeDefault.css" />
|
3 |
< script type = "text/javascript" src = "syntaxhighlighter/scripts/shCore.js" ></ script >
|
4 |
< script type = "text/javascript" src = "syntaxhighlighter/scripts/brush.js" ></ script >
|
5 |
< script type = "text/javascript" >SyntaxHighlighter.config.clipboardSwf = 'syntaxhighlighter/scripts/clipboard.swf';
|
6 |
SyntaxHighlighter.all(); |
注意,如果的SyntaxHighlighter 2.1版本,Scripts文件夹内并没有brush.js文件,你可下载SyntaxHighlighter 3.0.8.3,从此版本的Scripts目录中拷贝这个文件,直接调用。框架资源分享