论坛首页 Web前端技术论坛

syntaxhighlighter终于可以正常复制代码了

浏览 1290 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-07-30  

本文将向你介绍使用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();
7 </script>

 注意,如果的SyntaxHighlighter 2.1版本,Scripts文件夹内并没有brush.js文件,你可下载SyntaxHighlighter 3.0.8.3,从此版本的Scripts目录中拷贝这个文件,直接调用。框架资源分享

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics