小树苗，我的前端小站—

Syntaxhighlighter代码高亮插件

2017/12/09bypeijin

当前版本为3.0.83，此篇文章仅仅对demo进行一些本地化修改，达到实现js/html/css的基本需求和美化。

下载地址：http://download.csdn.net/download/itmyhome/7757359

简单入门：http://blog.csdn.net/itmyhome1990/article/details/38517737

详细入门：http://www.cnblogs.com/heyuquan/archive/2012/09/28/2707632.html

步骤：

1.从下载地址下载插件，解压

2.从解压后的文件夹scripts和styles选择需要的文件，代码如下

            <link rel="stylesheet" type="text/css" href="../syntaxhighlighter/styles/shCoreDefault.css">
            <script type="text/javascript" src="../syntaxhighlighter/scripts/shCore.js"></script>
            <script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushXml.js"></script>
            <script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushJScript.js"></script>
            <script type="text/javascript" src="../syntaxhighlighter/scripts/shBrushCss.js"></script>
            <script type="text/javascript" src="../syntaxhighlighter/scripts/local.js"></script>

pre标签是推荐的方式，详情请参考详细入门，pre标签使用时注意将>和<转义为>和<。

安装过程中的问题

问题1：

当代码过长时，就会产生滚动条，如果不喜欢横向滚动条，可以按照以下方式修改

打开shCoreDefault.css文件

             white-space: pre !important; //这句话注释
             /*white-space: pre !important;*/

问题2：

shCoreDefault.css，shCore.js，shBrushXml.js，shBrushJScript.js，shBrushCss.js都是需要加载的插件，local.js是本地化插件，主要内容是初始化Syntaxhighlighter，同时jquery部分是对取消横向滚动条后，行号太短，超出部分没有行号的问题。（代码来自JQuery搞定SyntaxHighlighter v3.x长代码自动换行行号错乱问题）。

此处使用的jquery插件，所以一定要在加载jquery以后再插入下段代码。

            SyntaxHighlighter.defaults['toolbar'] = false; //去掉右上角问号图标
            SyntaxHighlighter.config.tagName = 'pre'; //可以更改解析的默认Tag。
            SyntaxHighlighter.config.bloggerMode = true;
            SyntaxHighlighter.config.stripBrs = true;
            SyntaxHighlighter.all();

            $(function() {
            // Line wrap back
            var shLineWrap = function() {
            $('.syntaxhighlighter').each(function() {
            // Fetch
            var $sh = $(this),
            $gutter = $sh.find('td.gutter'),
            $code = $sh.find('td.code');
            // Cycle through lines
            $gutter.children('.line').each(function(i) {
            // Fetch
            var $gutterLine = $(this),
            $codeLine = $code.find('.line:nth-child(' + (i + 1) + ')');
            //alert($gutterLine);
            // Fetch height
            var height = $codeLine.height() || 0;
            if (!height) {
            height = 'auto';
            } else {
            height = height += 'px';
            //alert(height);
            }
            // Copy height over
            $gutterLine.attr('style', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0
            console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
            });
            });
            };


            // Line wrap back when syntax highlighter has done it's stuff
            var shLineWrapWhenReady = function() {
            if ($('.syntaxhighlighter').length === 0) {
            setTimeout(shLineWrapWhenReady, 10);
            } else {
            shLineWrap();
            }
            };  // Fire
            shLineWrapWhenReady();
            });

问题3：

如果在CHROME和火狐浏览器下出现首行错位问题，解决办法如下：根本原因是与主CSS样式的.container样式冲突，如下位置是bootstrap的定义(blog是基于bootstrap搭建)：

            .clearfix::before, ...,.container::before, .container::after, ..., .modal-footer::before, .modal-footer::after {
              content: " ";
              display: table;
            }

在shCoreDefault.css中末尾添加如下代码

             .syntaxhighlighter td.code .container::before, .syntaxhighlighter td.code .container::after {
                display: none;
              }

问题4：

在chrome/firfox浏览器下存在右侧滚动条问题，打开shCoreDefault.css，找到

            .syntaxhighlighter table {
              width: 100% !important;
            }

修改为：

            .syntaxhighlighter table {
              width: 100% !important;
              margin: 1px 0 !important;
            }

问题5：

原版的Syntaxhighlighter插件是没有斑马纹路效果的，需要手动修改，颜色随自己喜好即可。这里的颜色是#f4f4f4。

            .syntaxhighlighter .line.alt2 {
              background-color: #f4f4f4 !important;
            }

前端知识总结