1. 首页
  2. 文章列表
  3. 解决代码着色组件SyntaxHighlighter长代码不换行以及行号显示错位的问题

最近博客项目已基本完工了,在优化前端的时候,突然想起发表的很多文章都包含代码这部分,于是想起了用SyntaxHighlighter来对文章中贴的代码进行美化,但用过SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题,这个问题在网上也找不到什么解决办法,折腾了一天,总算是把它解决了,办法其实简单,下面说下如何解决。

打开shCore.css和shCoreDefault.css文件,找到对.syntaxhighlighter textarea的定义,在最后加上一句:word-break:break-all !important;意思是让代码强制换行显示。

white-space: pre-wrap !important;
word-break: break-all !important;

刷新页面看看,恩,好像是有点效果,可以换行了,但是,首行错位了:

懒得勤快的博客_全栈开发者_互联网分享精神

好,看来问题快解决了,赶紧用浏览器inspect一下,发现首行位置有个container的before伪类把它撑开了:

懒得勤快的博客_全栈开发者_互联网分享精神

那这就好办了,赶紧在shCore.css里面写了一个类样式:

.syntaxhighlighter .code .container:before { /*一定要写这样写全,因为bootstrap用到了container*/
       content: "" !important;
}

再刷新下页面,首行偏移的问题解决了,新的问题又来了,行号竟然没对齐:

懒得勤快的博客_全栈开发者_互联网分享精神

然后就又寻思了一番,最后用js解决了问题,用js慢慢调,解决了,打开shCore.js,在最后添加以下代码:

;$(function () {
	var shLineWrap = function () {
		$('.syntaxhighlighter').each(function () {
			var $sh = $(this),
				$gutter = $sh.find('td.gutter'),
				$code = $sh.find('td.code');
			$gutter.children('.line').each(function (i) {
				var $gutterLine = $(this),$codeLine = $code.find('.line:nth-child(' + (i + 1) + ')');
				var height = $codeLine.height() || 0;
				if (!height) {
					height = 'auto';
				}
				else {
					height = height += 'px';
				}
				$gutterLine.attr('style', 'height:' + height + '!important');
				console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine);
			});
		});
	};
	var shLineWrapWhenReady = function () {
		if ($('.syntaxhighlighter').length === 0) {
			setTimeout(shLineWrapWhenReady, 10);
		}
		else {
			shLineWrap();
		}
	};
	shLineWrapWhenReady();
});

再刷新下浏览器,恩,现在终于全对了:

懒得勤快的博客_全栈开发者_互联网分享精神

css完整代码如下:

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter, .syntaxhighlighter td, .syntaxhighlighter tr, .syntaxhighlighter tbody, .syntaxhighlighter thead, .syntaxhighlighter caption, .syntaxhighlighter textarea {
    -moz-border-radius: 0 0 0 0 !important;
    -webkit-border-radius: 0 0 0 0 !important;
    background: none !important;
    border: 0 !important;
    bottom: auto !important;
    float: none !important;
    left: auto !important;
    line-height: 1.1em !important;
    margin: 0 !important;
    outline: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    right: auto !important;
    text-align: left !important;
    top: auto !important;
    vertical-align: baseline !important;
    width: auto !important;
    box-sizing: content-box !important;
    font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
    font-weight: normal !important;
    font-style: normal !important;
    min-height: auto !important;
    font-size: 13px !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}
    .syntaxhighlighter .code .container:before {
        content: "" !important;
    }

好了,到这里可能有些小伙伴们觉得不想自己动手,那我这里也提供了最终修改版的源文件,方便直接使用,css文件已修改成bootstrap样式的了,如文章本身的代码样式所示。

懒得勤快的博客_全栈开发者_互联网分享精神SyntaxHighlighter.zip


文章历史版本:

修改次数:2 次 查看历史版本

版权声明:

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。本文链接:https://masuit.com/105

l  博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。

l  文章内容部分来源于互联网,不代表本人的任何立场;涉及到的软件来源于互联网,仅供个人下载使用,请勿用于商业用途,版权归软件开发者所有,下载后请于24小时内删除,请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!如果你是版权方,认为本文内容对您的权益有所侵犯,请联系博主,待博主进行严格地审查和背景调查后,情况属实的将在三天内将本文删除或修正。

l  博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。

l  博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章,请原谅博主成为一个无耻的文档搬运工!

l  博主只是一名普通的互联网从业者,不懂修电脑,不会卖电脑,不会帮你盗号,不会破解开机密码,找不回你丢失的手机等,如有这样的想法请绕道!

相关推荐:

大前端的未来可能代替ajax的东西——Fetch API初体验 ECMAScript 2017(ES8)新特性尝鲜
angular表格神器ng-table的服务端分页的解决方案 自从用了linqjs,再也不用担心操作json集合啦
又一前端神级类库——lodash.js工具库 在angular中集成SignalR即时通信框架
web前端知识体系大全 通过引用TypeScript定义来提高你的Javascript开发能力

评论区:

    还没有评论哦,赶紧来写评论吧

    分享按钮