2016-1-17 博客文章增加了markdown格式,由MD标记

2016-03-14 01:03:00

代码工具毕竟不像铁锤那么简单。不稍微看看源码,一旦有了bug简直是毫无头绪。


代码高亮:

我从往上下载的syntaxHighlighter插件,版本一直在更新。但调用方法都很简单,基本如下:

//文件路径请自行修改
<script type="text/javascript" src="__PUBLIC__/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link href="__PUBLIC__/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" style="text/css" />
<script>
    SyntaxHighlighter.all();
</script>


隐藏或显示Toolbar:

我开始是想要显示toolbar的,发现设置参数无效。最终找到原因如下:

if(pre){
                pre.className = 'brush:'+lang+';toolbar:true;';
            }

上面一段代码是在ueditor.all.js文件里找到的,该文件会给我们在编辑器里添加的代码<pre>标签添加class,结果如下:

<pre class="brush:html;toolbar:true">
    our code here
</pre>

如果这里toolbar参数为false,那么在SyntaxHighlighter无论怎么设置都不会出现工具条的。


如果这里已经为true了,那就在SyntaxHighlighter里设置即可。

1.外面传参的方式:

SyntaxHighlighter.all({"toolbar":true});

2.修改默认参数的方式:

在shCore.js文件里找到如下代码所示位置,进行设置即可。

             'gutter' : true,

            /** Enables or disables toolbar. */
            'toolbar' : false,  //工具栏在这里

            /** Enables quick code copy and paste from double click. */
            'quick-code' : true,

            /** Forces code view to be collapsed. */
            'collapse' : false,


消除代码换行,移动端浏览时,显示滚动条:

换行的效果是下面css效果带来的,所以删除下面这种css效果即可。

word-break:break-all;


显示滚动条,这个效果其实插件本来就有的。我尝试不行的原因是本人用的插件代码是被人修改过了的,结果如下:

keng.png


咱们代码的pre标签被syntaxHighlighter替换成table了。要想table出现横向滚动条,在table的父div里,添加如下css:

overflow-x:auto !important;

而现在人家把俺的父div给删了。找了好久才找到原因,结果就这回事儿,真心不知道值不值得。