react-highlight，实现select语句高亮展示，并且显示行号

最新推荐文章于 2024-06-16 09:31:03 发布
最新推荐文章于 2024-06-16 09:31:03 发布
阅读量3.5k 收藏 2
点赞数
分类专栏： js 文章标签： js react select语句高亮并显示行号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42260661/article/details/84255896
版权
本文介绍了如何使用react-highlight库来实现select语句的高亮展示，并添加行号。首先通过npm安装react-highlight，然后导入并使用组件。为了达到预期效果，需要引入monokai_sublime主题的CSS和highlight.min.js。在React项目中，可以结合jQuery进行操作，确保代码正确显示。每段代码前后需添加行号标记，以便呈现效果。提供的代码示例展示了具体的实现过程，如有疑问，作者欢迎交流讨论。
摘要由CSDN通过智能技术生成

安装：npm install react-highlight --save
导入：import Highlight from ‘react-highlight’
使用：<Highlight languages={[“javascript”]}>Hello React

但是吧~

使用这个插件，最好采用下面这种方式：
1.引入这个css样式
http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css
2.引入这个js
http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js
(备注：如果是在react项目中使用的话，按照最开始的那种方法npm安装)
3.可以结合jq实现（最好使用这个版本）
https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js

按照以上几个步骤就可以使用select语句高亮并带有行号展示
效果如下：
在这里插入图片描述</

最低0.47元/天 解锁文章
前端宏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
工作笔记 (20200220) React-highlight的使用方法
qq_41523392的博客
02-20 3230
React-Highlight的使用方法 1.在项目中安装 yarn add react-highlight 2.在React项目中导入 import Highlight from ‘react-highlight’ 3.选择自己喜欢的主题 在node_modules/highlight.js/styles/你喜欢的样式名 举个????： import “highlight.js/styles/zen...
在react中使用highlight.js将页面上的代码高亮
留着鼻涕敲代码
12-13 4156
通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮，highlight.js官方文档 下载highlight.js npm i highlight.js 导入highlight.js import hljs from 'highlight.js' import 'highlight.js/styles/vs2015.css' 用highlight.js useEffect(() => { // 配置 highlight.js hljs.co
文本高亮利器：react-highlightable —— 让你的React应用更加生动！
最新发布
gitblog_00072的博客
06-16 413
???? 文本高亮利器：react-highlightable —— 让你的React应用更加生动！ 项目地址:https://gitcode.com/ydeshayes/react-highlight 在数字化的今天，信息展示和交互体验变得尤为重要。无论是在线文档阅读、代码分享还是任何涉及大量文本的应用场景中，对文本进行高亮显示不仅能够提升用户体验，还能增强重要信息的视觉辨识度。为此，我们向大家隆重推...
react-highlight.js:Highlight.js库周围的简单React包装器
04-28
演示版 在查看演示。 安装 使用NPM安装react-highlight.js： npm install react-highlight.js --save 选择highlight.js主题，并确保它包含在索引文件中。 < link rel =' stylesheet ' href =' https://highlightjs.org/static/demo/styles/railscasts.css '/> 然后使用react-highlight.js像这样显示您的文本： import Highlight from 'react-highlight.js' ; < Highlight xss=removed> { content } < / Highlight > 执照 根据MIT许可，可以使用react-highlight.js 。
在 React 中使用 highlight.js 和 Clipboard.js 实现代码高亮和复制功能
JudithHuang的博客
04-23 1202
本文介绍了如何在 React 中使用 highlight.js 和 Clipboard.js 这两个常用的库实现代码高亮和复制功能。我们首先安装了这两个库，并配置了 highlight.js 支持的语言。接着，我们实现了一个名为 CodeBlock 的组件，在其中使用了 useRef 和 useEffect 钩子来管理代码块和复制按钮的 DOM 对象，使用 highlight.js 对代码块进行了高亮，创建了 Clipboard 实例来实现复制功能
react中代码块输出，代码高亮显示，带行号，能复制
一只程序媛
01-26 2813
以modal组件为例： import React, { useState, useEffect } from 'react'; import { Modal, Button, message } from 'antd'; import Highlight from 'react-highlight'; import "highlight.js/styles/mono-blue.css"; import { CopyToClipboard } from 'react-copy-to-clipboard'
react-dropdown-select:可自定义的下拉菜单用于做出React
04-28
例如在document.body 自动位置小捆安装npm install --save react-dropdown-select网站动机react-select非常好，但是有时项目要求超出了它的能力范围用法进口： import Select from "react-dropdown-select";...
react-native-select：react native的简单下拉列表-iOS和Android
02-05
React本机选择React Native App的简单下拉菜单！...安装npm i react-native-selectme --save用法在您的Javascript文件中要求它。 还支持使用对象解构的组件。 Select Option OptionList 。 <OptionList>
react-highlight-words:React组件在较大的文本正文中突出显示单词
05-03
import Highlighter from "react-highlight-words" ;ReactDOM . render ( < Highlighter highlightClassName = "YourHighlightClass" searchWords = { [ "and" , "or" , "the" ] } autoEscape = { true } ...
react-multi-select：使用和用于React构建的Multi Select组件
02-04
npm install @kenshooui/react-multi-select --save 使用Yarn安装： yarn add @kenshooui/react-multi-select 导入样式 在您的应用程序中包含组件CSS import " @kenshooui/react-multi-select/dist/style.css " ...
React-Text-Highlights:可自定义的React组件库，用于突出显示文本
05-26
React-Text-Highlights 这是一个React组件，用于突出显示文本中的短语或一组短语。 你可以找到一个 安装 npm i --save react-text-highlights 重要概念 该库可让您以所需的任何颜色突出显示各种短语或“短语集” 。 甚至碰撞或重叠的短语也可以突出显示！ 该库按从低到高的顺序优先排列短语及其突出显示。 以用法部分下面的示例为例，蓝色的短语是最低优先级，红色的短语是最高优先级。 我们的红色词组“ highlight”将与蓝色词组“ highlight effect”重叠，当您将鼠标悬停在“ highlight”一词上时，红色将是最高优先级，蓝色（或任何其他冲突词组）将变得透明。 TLDR：从最低优先级到最高优先级对短语进行排序，该组件将处理冲突/重叠，始终偏向优先级较高的突出显示。 用法 import '../node_module
推荐一款强大的React代码高亮库：react-syntax-highlighter
gitblog_00008的博客
03-21 1022
推荐一款强大的React代码高亮库：react-syntax-highlighter 项目地址:https://gitcode.com/conorhastings/react-syntax-highlighter 在Web开发中，展示代码片段时，代码的可读性和美观性至关重要。今天我要向大家推荐的是react-syntax-highlighter——一个用于React应用的高性能代码高亮组件。 项目...
在 React 中使用 highlight.js 和 Clipboard.js 实现代码块和复制功能
MYG_G
05-17 1555
react中使用highlight代码块组件
实现 vue、react内部 页面源码展示 的高亮显示 之使用highlight.js
缘于始，终于途
08-20 773
话不多说先上一个我各方收集资源参考 elment-ui实现的最终效果（此处以vue项目为例） 下面来说一下我实现的具体流程和实现中遇到的问题 1.vue项目 有现成的项目更好 没有的就自己搭一个吧在这里 我就不过多赘述了 实在不会的 我也教！！！ 1.创建脚手架工具 demo中 cnpm install vue-cli -g vue list 1.建立vue项目（e:） vue init webpack objname;(输入name) 2.启动vue项目 cd objname //跳转..
react高亮显示关键字组件react-highlight
hzxOnlineOk的博客
08-16 5413
高亮显示关键字组件react-highlight ： 结果： 相关react代码： HTML样式代码引入： 总体浏览：
推荐开源项目：react-highlight - React 的语法高亮组件
gitblog_00006的博客
05-17 502
推荐开源项目：react-highlight - React 的语法高亮组件 项目地址:https://gitcode.com/akiran/react-highlight 1、项目介绍 react-highlight 是一个基于 React 框架的组件，用于实现代码的语法高亮显示。它依赖于优秀的第三方库 highlight.js，提供了多种主题和语言支持，使得在您的 Web 应用中展示优雅且易于...
react-highlight-words源码解读
weixin_34194317的博客
02-27 701
react-highlight-words https://github.com/bvaughn/react-highlight-words 源码思路 直接返回一个函数式组件 最重要是调用findAll函数，返回[{start: startIndex, end: endIndex, highlight: boolean}, {同样的结构}]，将一段句子合理的划分为从前到后的高亮部分和未高亮部分 ...
React 中的语法高亮指南
分享身边生活经验blog
10-21 2593
软件开发人员阅读的代码与编写的代码一样多。因此，要增强代码的可读性，不仅要努力编写可读的代码，还要应用适当的代码格式和语法高亮。开发人员每天使用几种编程和非编程计算机语言。每种语言都有其语法，因此需要语法高亮。为了在浏览器环境中应用语法高亮，存在 Prism、Highlight 和 React 语法高亮等库。这些库中的每一个都有其优点和缺点。其中一些库是为使用纯 JavaScript 而开发的，而另一些库也支持 React 等前端框架。本文将是 Prism 等流行的语法高亮库以及如何将它们与 React 一
umi使用react-monaco-editor并高亮显示代码
05-12
然后在你的组件中引入 `react-monaco-editor`，并且设置 `options` 属性，其中 `language` 属性设置为你要高亮的代码语言。比如，这里我们设置为 `javascript`。 ``` import React, { Component } from "react"; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值