SyntaxHighlighter行号显示错误问题解决方案

SyntaxHighlighter是根据代码中的换行符分配行号的。但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,会出现行号对不上的问题,像这样:

通过设置CSS强制不换行,可以保证行号显示正常,但会出现滚动条,像这样:

使用开发者工具查看SyntaxHighlighter所渲染的元素可以看到,每个行号和每行代码都是一个div,而由于是行号和代码是分别放在两个td中进行的高度计算,导致了在其中一部分出现高度变化时,两部分的高度不同。

这时候考虑在元素渲染完成后,动态改变行号的默认高度

var guttelines=$('.gutter .line’);
var codelines=$('.code .line’);
for(i=0;i<$(guttelines).length;i++){$(guttelines).eq(i).css('height',$(codelines).eq(i).css('height'))
}

查看元素及渲染效果,元素虽然被设置了高度,但并未按所设置的高度进行显示,行号显示依然有问题,会这样:

 

使用开发者工具查看行号元素,可以看到,其高度并未生效

 

查看style渲染过程,可以看到,高度是被SyntaxHighlighter默认css中通过important覆盖了

 

删除这个important高度设置,重新刷新页面,问题解决。

 

注:SyntaxHighlighter 3.0.83 使用的是 XRegExp 1.5.0 ,在修改时需要引用该js

完整代码请参考: https://github.com/buaawp/syntaxhighlighter/

 

最终效果请参考:http://leettest.com

 

转载于:https://www.cnblogs.com/buaawp/p/5345496.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288360.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql 一对多 关联一条最新的数据_不得不会的mysql锁

6. 多表之间的关系如图&#xff0c;实际业务数据库中的表之间都是有关系的&#xff0c;我们接下来主要要学习的就是如何分析表关系及建立表关系。分类表create table category( cid varchar(32) primary key, cname varchar(100) );商品表create table product( pid varchar(3…

C语言实现万年历记事本,简单实用的layui日历标注记事本代码

一款简单实用的layui日历标注记事本代码&#xff0c;响应式自适应电脑、平板跟手机移动端&#xff0c;可以在日历上设置每日事项标注记录&#xff0c;支持撤销、添加、修改标注记录。查看演示下载资源&#xff1a;52次 下载资源下载积分&#xff1a;20积分js代码 layui.use([la…

围棋经典棋谱_秀秀老师:茶艺师也要学好围棋

“引清风&#xff0c;邀明月&#xff0c;去来兮。省多少闲是闲非。临山近水&#xff0c;近些松竹向些梅。书院茶香几多般&#xff0c;诗酒琴棋。无萦无烦恼&#xff0c;无别离。于中国文人雅士而言&#xff0c;茶与棋&#xff0c;皆是清雅之物事。曹臣《舌花录》中&#xff0c;…

基于 Dapr 和 .NET 开发云原生应用(奉上视频+资料)

点击蓝字/关注我序言&#xff1a;今年是.NET20周年&#xff0c;为了传播.NET和营造.NET技术氛围举办了此次云原生开发挑战赛&#xff0c;请来众多业界大咖来给大家分享技术&#xff0c;为大家参赛做预热&#xff0c;参赛的朋友都可获得51Aspx 500积分和微软亲签证书&#xff0c…

【Spring-AOP-学习笔记-3】@Before前向增强处理简单示例

项目结构程序代码HelloImpl.javaWorldImpl.java定义切面类package org.crazyit.app.aspect;import org.aspectj.lang.annotation.Aspect;import org.aspectj.lang.annotation.Before;// 定义一个切面Aspectpublic class AuthAspect{ // 匹配org.crazyit.app.service.impl包下所…

sklearn 线性回归_使用sklearn库做线性回归拟合

背景资料随着海拔高度的上升&#xff0c;温度越来越低&#xff0c;经过气象专家的研究&#xff0c;在一定的海拔高度范围内&#xff0c;高度和温度呈线性关系。现有一组实测资料&#xff0c;我们需要对这些数据进行处理拟合&#xff0c;获得此线性关系。解决思路采用sklearn库中…

VS2022之DebuggerVisualizer

在Debug程序时&#xff0c;面对一些大集合&#xff0c;之前是这样查看的&#xff0c;如下图&#xff0c;这样看起来不直观&#xff0c;集合中的数据只能一个一个实体查看&#xff1a;VS2022预览版带来一个新功能&#xff0c;集合表格可视化&#xff0c;比如下面这样一段代码&am…

SmartIDE支持开源国产IDE - 阿里蚂蚁的OpenSumi丨IDCF

作者&#xff1a;徐磊文章首发地址&#xff1a;https://smartide.cn/zh/blog/2022-0419-sprint16/SmartIDE v0.1.16 (Build 3137)已经在2022年4月19日发布到稳定版通道&#xff0c;我们在这个版本中增加了阿里和蚂蚁发布的国产IDE OpenSumi的支持&#xff0c;以及其他一些改进。…

js操作文件

在HTML表单中&#xff0c;可以上传文件的唯一控件就是<input type"file">。 注意&#xff1a;当一个表单中包含<input type"file">时&#xff0c;表单的enctype必须指定 为multipart/form-data,method必须指定为post&#xff0c;浏览器才能正确…

mycat 双主 热切换

为什么80%的码农都做不了架构师&#xff1f;>>> Mycat-server-1.6-RELEASE-20161028204710-linux.tar.gz schema.xml <?xml version"1.0"?> <!DOCTYPE mycat:schema SYSTEM "schema.dtd"> <mycat:schema xmlns:mycat"ht…

6 四大组件之Service

6-1 Servie概述 组件篇——Service 定义:  1.后台运行,不可见,没有界面  2.优先级高于Activity Service是Android系统的后台服务组件&#xff0c;适用于开发无界面、长时间运行的应用功能。 Service特点如下&#xff1a; 没有用户界面 不会轻易被Android系统终止 在系统…

WCF服务寄宿IIS时.SVC文件无法浏览的解决办法

在IIS中托管服务和经典的ASMX Web服务托管相似,需要在IIS下创建虚拟目录,并提供一个.svc文件和Web.config配置文件。另外,托管时,服务的基地址必须与.svc文件的地址相同。 一、操作步骤: (1)打开IIS,新建网站,选择物理路径 (2)打开IIS,在默认网站下添加应用程序,…

C#语法糖系列 —— 第一篇:聊聊 params 参数底层玩法

首先说说为什么要写这个系列&#xff0c;大概有两点原因。这种文章阅读量确实高...对 IL 和 汇编代码 的学习巩固所以就决定写一下这个系列&#xff0c;如果大家能从中有所收获&#xff0c;那就更好啦&#xff01;一&#xff1a;params 应用层玩法 首先上一段 测试代码。class …

nginx 修改配置文件使之支持pathinfo,且隐藏index.php

声明环境&#xff1a; nginx centos6.8 使用lnmp一键包搭建环境&#xff08;2019年2月19日 &#xff09;以前使用过别的办法去修改配置文件&#xff0c;但是过于繁琐&#xff0c;最近发现新版本中&#xff0c;在nginx 的 conf目录下发现了文件“enable-php-pathinfo.conf”&am…

关于在Windows下AndroidStudio.使用React-Native开发android报错红屏“run react-native start”解决

以下是报错&#xff0c;不过他已经给了解决办法&#xff0c;报错提示的大概中文译为“无法加载脚本&#xff0c;请确保你的Metro服务以及那个包正确”&#xff0c;由于我个人并不是专业安卓&#xff0c;公司项目没办法就上了&#xff0c;所以我就不关包了&#xff0c;包肯定是正…

主成分分析法_数学建模 || 葡萄酒的评价(1)主成分分析法

首先要说一下&#xff0c;这篇文章我在其他的平台发过&#xff0c;也是本人亲自写的&#xff0c;如果大家觉得眼熟的话放弃轻松&#xff0c;没有抄袭&#xff0c;主要是因为与我这 “葡萄酒的评价” 题目成系列了&#xff0c;因此在这里再把这个贴出来。2012 年 A 题葡萄酒的评…

imagePreview接口调用微信自带图片播放器

2019独角兽企业重金招聘Python工程师标准>>> 在微信浏览器中&#xff0c;出现在网页上的图片通过点按一小段时间&#xff0c;可以调出微信隐藏的图片播放器&#xff0c;在播放器中看图可以随意放大缩小&#xff0c;体验更炫酷。不过这个功能默认只对通过微信后台编辑…

TypeError: 'MongoClient' object is not callable

在声明数据库的时候&#xff0c;将中括号[ ]换成了圆括号&#xff08;&#xff09;错误&#xff1a;修改完成后的代码&#xff1a;client pymongo.MongoClient(localhost)db client[my_database]#注意这里用中括号&#xff01;&#xff01; 之后再运行程序&#xff0c;就能存…

信息系统开发有管理

做了一套题&#xff0c;又总结了下《信息系统开发与管理》。感觉又有了新的认识。这本书应该说总体的设计都是非常具有逻辑性的。内容设计的有些水到渠成。要说结构的话&#xff0c;应该算是总—分结构吧。一開始就以一篇概述全面的介绍了此书。我总结了以下的图。 信息、系统、…

Main 和 静态构造函数 到底谁先执行?

最近被问到一个很有意思的问题&#xff0c;到底是 Main函数 先执行还是 静态构造函数 先执行&#xff1f;参考如下代码&#xff1a;class Program{static Program(){Console.WriteLine("我是 静态构造 函数&#xff01;");}static void Main(string[] args){Console.…