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' }}

完美高效解决问题!

相关推荐
悟能不能悟1 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶1 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice2 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip2 小时前
js上下文
前端·javascript
中草药z2 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
醉方休3 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
学习3人组3 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽3 小时前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo3 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭4 小时前
react+umi项目如何添加electron的功能
javascript·electron·react