react-diff-viewer 如何实现语法高亮

前言

react-diff-viewer 是一个很好的 diff 展示库,但是也有一些坑点和不完善的地方,本文旨在描述如何在这个库中实现自定义语法高亮。

Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. Use renderContent(content: string) => JSX.Element and your favorite syntax highlighting library to achieve this.
仓库地址:https://github.com/praneshr/react-diff-viewer

问题

issue 地址:https://github.com/praneshr/react-diff-viewer/issues/182

如果只是直接引入这个库,你会发现没有代码的语法高亮,看起来会十分难受

于是乎,你按照文档引入了,发现样式会被覆盖掉,两种样式共存会很难看,如下:

解决方案

这个问题发生的原因是因为你自定义的渲染器覆盖了原有样式,只需要把你自定义的渲染属性移除就行,比如 customStyle={{ display: 'inline', padding: 0, background: 'none' }}

完美高效解决问题!

相关推荐
前端小趴菜0535 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~2 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele4 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
初遇你时动了情5 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz5 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
ohMyGod_1238 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜058 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js