使用react实现sql高亮

最新推荐文章于 2025-03-01 08:24:34 发布
最新推荐文章于 2025-03-01 08:24:34 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fighting_xuan/article/details/117332069
版权
本文介绍了如何使用highlight.js在React中实现代码片段的高亮显示，以'查看代码'为模态对话框，展示了如何将SQL代码以可读的格式嵌入到modal中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用highlight,js实现，先引入相关包

import Highlight from 'react-highlight';
import 'highlight.js/styles/vs.css';

引用方式

<Modal
  title="查看代码"
  isible={this.state.visible}
  onOk={this.handleOk}
  onCancel={this.handleOk}
  style={{ width: 1000 }}>
 //就这一句
<Highlight languageName="sql" style={{ whiteSpace: 'pre-wrap' }}>{this.state.checkText}</Highlight>
</Modal>

实现效果
在这里插入图片描述

React Ace 是一个基于 React 的代码编辑器组件，它为开发者提供了代码提示、语法高亮以及自定义补全代码的功能
ByteBuster的博客
08-18 1035
以上代码创建了一个简单的代码编辑器组件，并设置了语言模式为 JavaScript，主题样式为 Monokai，组件名称为 “code-editor”，禁用了滚动警告，设置了字体大小为 14px，宽度为 100% ，高度为 500px。React Ace 是一个基于 React 的代码编辑器组件，它为开发者提供了代码提示、语法高亮以及自定义补全代码的功能。通过以上的代码，我们已经成功地使用了 React Ace 组件，并实现了代码提示、语法高亮以及自定义补全代码的功能。在上述代码中，我们首先创建了一个。
monaco-editor 实现SQL编辑器
qq_43156442的博客
06-07 895
base: 'vs', // 以哪个默认主题为基础："vs" | "vs-dark" | "hc-black" | "hc-light"rules: [// 高亮规则，即给代码里不同token类型的代码设置不同的显示样式],colors: {'scrollbarSlider.background': '#edcaa6', // 滚动条背景'editor.foreground': '#0d0b09', // 基础字体颜色。
react-highlight，实现select语句高亮展示，并且显示行号
weixin_42260661的博客
11-19 3668
安装：npm install react-highlight --save 导入：import Highlight from ‘react-highlight’ 使用：&amp;amp;amp;lt;Highlight languages={[“javascript”]}&amp;amp;amp;gt;Hello React 但是吧~ 使用这个插件，最好采用下面这种方式： 1.引入这个css样式 http://cdn.bootcss.com/h...
前端实现SQL语句高亮，并且添加缩略图
qq_49464155的博客
01-17 1746
前端实现SQL语句高亮，并且添加缩略图
React + TypeScript 实现 SQL 脚本生成全栈实践
最新发布
如沐春风
03-01 797
在现代化全栈开发中，已成为提升开发效率的关键。传统手动编写 SQL 脚本的方式存在（Schema Drift）和两大痛点。本文将结合 React + TypeScript 技术栈，解析如何构建智能化的 SQL 脚本生成系统，并给出 2025 年最新企业级解决方案。
sql-highlight:一个用纯 JavaScript 编写的简单轻量级的 SQL 语法高亮库
07-24
SQL 语法高亮 一个用纯 JavaScript 编写的简单轻量级的 SQL 语法高亮库 这到底是怎么回事？ SQL Highlight 是一个突出 SQL 查询的小包。 它既可以输出到带有 Unicode 转义序列的终端，也可以输出到普通的 HTML。 哦，没有外部依赖 :winking_face: 安装 通过 Yarn 安装： yarn add sql-highlight 通过 NPM 安装： npm install sql-highlight 用法 最基本的形式： const { highlight } = require ( 'sql-highlight' ) const sqlString = "SELECT `id`, `username` FROM `users` WHERE `email` = 'test@example.com'" const highlighted = highlig
页面sql编辑高亮显示
09-27
本资源解决在页面做一个sql编辑输入框时，实现关键字时时高亮显示，类似于客户端功能，本资源比较方便好用，是我提炼出来的，下载后需要改下jsp内的路径即可使用
react如何实现sql-formatter输格式化后高亮展示
10-29
React结合第三方库可以实现SQL格式化并高亮显示的功能，其中最常用的是`react-syntax-highlighter`和`sql- 首先，你需要通过npm或yarn安装这两个库： ``` npm install react-syntax-highlighter sql-formatter --...
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
React-Monaco-Editor则将Monaco Editor的灵活性和React的组件化思想完美融合，使得在React项目中实现代码编辑功能变得更加简单。 2. **源码分析** 提供的源码可以用于深入理解React-Monaco-Editor的工作原理。通过...
react sql格式化_前端SQL-React，Postgres和RLS /第1部分
weixin_26750481的博客
09-14 873
react sql格式化When it comes to the data exchange between the frontend and the backend REST is the most common way to go. At least it was until GraphQL came in. When I heard the first time about GraphQL ...
react-codemirror2 sql
ChasenZh的博客
11-25 1228
<CodeMirror value={statement} options={{ mode: "sql", matchBrackets: true, styleActiveLine: true, autoCloseBrackets: true, lint: true, ...
SQLtoReact：将数据从MySQL（后端）发送到React网页（FrontEnd）
02-14
SQLtoReact 将使用Express构建MySQL（后端）的数据发送到React网页（FrontEnd） 设置工作流程以通过NPM测试运行，以确保没有损坏 简单的文件设置可从MySQL服务器提取数据，通过API调用提取“用户”表，然后将这些信息发送到使用React设置的前端。
React使用CodeMirror实现SQL输入提示编辑器
司马班如
12-12 4674
React使用CodeMirror实现SQL输入提示编辑器一、编辑器效果1.1 关键词提示效果图1.2 数据库和表格选择提示效果二、具体实现2.1 依赖下载2.2 方案一2.3 方案二 今天老大让我把原来的SQL编辑器放到新的平台上，然后我对照原来的编辑器，然后再修改了一下，形成了一个全新的SQL输入提示编辑器，先上图看看效果，然后再详细讲解怎么实现 一、编辑器效果 1.1 关键词提示效果图 1.2 数据库和表格选择提示效果 二、具体实现 我们的项目主要用到了React+CodeMirror组件，在实例
如何在web中动态高亮显示sql脚本
huryer的专栏
03-01 4239
1、静态语法高亮 适用于sql脚本已经嵌入在html的形式 1.1、显示效果 1.2、源码 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;title&amp;amp
Vue3之集成Highlight.js代码语法亮显示插件
热门推荐
yuanjinshenglife的专栏
03-07 1万+
Vue3之集成Highlight.js代码语法亮显示插件,如Java、sql、json、js等语法高亮显示
react sql格式化_为SQL Server数据库损坏做准备； 初步React与分析
culuo4781的博客
07-19 438
react sql格式化 Corruption is a looming thought through every administrator’s mind, from sysadmins to database administrators there is always a monster hiding in the shadows. SQL Server Database corru...
前端页面添加代码编辑区域（css和sql高亮）
weixin_44285195的博客
05-08 3701
前端页面添加代码编辑区域（css和sql高亮） 初级菜鸟，工作遇到了前端页面需要放一块可编辑代码的区域，只需要高亮css和sql语句，就去各种百度，最后使用了codemirror，下面为记录步骤。 1.下载codemirror 官网直接下载，点击DOWNLOAD 2.下载完查看需要用到的css和js lib目录下的css和js必须导入，然后就在mode里面找到需要的css和sql的js 3....
sql语句编辑器（react-monaco-editor）
weixin_45954775的博客
06-30 1898
说明：react 的 monaco editor 安装 npm install react-monaco-editor 使用 import MonacoEditor from 'react-monaco-editor' render(){ <MonacoEditor width="100%" height="700" language="sql" theme="white"//主题颜色 value={ruleSql} onC.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值