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

完美高效解决问题!

相关推荐
北海-cherish13 小时前
Wouter 和 React Router的区别
前端·react.js·前端框架
醉方休13 小时前
TensorFlow.js高级功能
javascript·人工智能·tensorflow
炒香菇的书呆子13 小时前
基于Amazon S3设置AWS Transfer Family Web 应用程序
javascript·aws
!chen13 小时前
学习 React 前掌握 JavaScript 核心概念
javascript·学习·react.js
YAY_tyy14 小时前
【JavaScript 性能优化实战】第五篇:运行时性能优化进阶(懒加载 + 预加载 + 资源优先级)
前端·javascript·性能优化
正义的大古14 小时前
OpenLayers地图交互 -- 章节七:指针交互详解
前端·javascript·vue.js·openlayers
qwy71522925816314 小时前
vue自定义指令
前端·javascript·vue.js
niusir14 小时前
Zustand 实战:10 行代码搞定全局状态
前端·javascript·react.js
niusir14 小时前
React 状态管理的演进与最佳实践
前端·javascript·react.js
看到我请叫我铁锤14 小时前
vue3使用leaflet的时候高亮显示省市区
前端·javascript·vue.js