react-codemirror实现log日志文件的输出

最新推荐文章于 2025-05-27 05:30:53 发布

逆风飞翔的猿

最新推荐文章于 2025-05-27 05:30:53 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react-codemirror 输出多行日志

本文链接：https://blog.youkuaiyun.com/chenqk_123/article/details/102780427

在做react项目时，碰到一个需求，需要将收集到的日志信息输入到页面上，而且高亮显示，这样方便用户/管理员查看。形似这样：

本来的思路是：通过js去读取日志文件中的内容，然后将日志一行一行的输出到文本域中，然后根据指定的字符串切割，显示不同的颜色，但是考虑到左侧需要显示行号以及日志的高亮显示，这样做起来就很麻烦。于是在网上搜罗了一下发现，codemirror专门为react做了一个组件react-codemirror.

研究了一下看看这个是怎么在react中使用的，怎么实现多行显示。

1.安装

npm install @uiw/react-codemirror --save

2.在js中引入

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/eclipse.css';
import 'codemirror/theme/monokai.css';

其中eclipse.css和monokai.css是两种不一样的主题，第一种是在eclipse打开时的高亮形式，第二种是在monokai中的高亮形式，在组件中的options配置项中会用得到

3.使用组件