react中代碼塊輸出,代碼高亮顯示,帶行號,能復(fù)制的問題
更新時間:2022年09月21日 11:08:29 作者:酷jjs
這篇文章主要介紹了react中代碼塊輸出,代碼高亮顯示,帶行號,能復(fù)制的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
react 代碼塊輸出,代碼高亮顯示,帶行號,能復(fù)制
以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'; import "./infoModal.less"; import hljs from 'highlight.js'; ? export default function infoModal(props: any) { ? const { visible, handleCancel, handleOk, modalType } = props; ? const [title, setIitle] = useState(''); ? const [num, setNum] = useState(0); ? const [data, setData] = useState({ ? ? "a": title, ? ? "a2": "1", ? ? "a3": "1", ? ? "a4": "1", ? ? "a5": "1", ? ? "a6": "1", ? ? "a7": "1", ? ? "a8": "1", ? ? "a9": "1", ? }); ? ? ? ? useEffect(() => { ? ? if (modalType === "in") { setIitle("入?yún)⑿畔?) } else { setIitle("出參信息") }; ? }, [modalType]); ? ? //顯示行號 ? useEffect(() => { ? ? if (visible) { ? ? ? hljs.initHighlightingOnLoad(); ? ? ? document.querySelectorAll('pre code').forEach((block) => { ? ? ? ? block.innerHTML = "<ul id='ulcode'><li>" + block.innerHTML.replace(/\n/g, "\n</li><li>") + " </li></ul>"; ? ? ? }); ? ? } ? }, [visible]) ? ? const handleCopy = () => { ? ? message.success('復(fù)制成功!') ? }; ? ? return <div> ? ? <Modal title={title} visible={visible} onCancel={handleCancel} onOk={handleOk} ? ? ? footer={[ ? ? ? ? <CopyToClipboard text={JSON.stringify(data, null, 2)} onCopy={handleCopy}> ? ? ? ? ? <Button>復(fù)制</Button> ? ? ? ? </CopyToClipboard>, ? ? ? ? <Button key="submit" type="primary" onClick={handleCancel}>確定</Button> ? ? ? ]} ? ? > ? ? ? <Highlight className="javascript mycode" > ? ? ? ? {JSON.stringify(data, null, 2)} ? ? ? </Highlight> ? ? </Modal> ? </div>; }
infoModal.less樣式
.hljs ul {?? ??? ??? ? ? list-style: decimal;?? ??? ??? ? ? margin: 0 0 0 40px!important;?? ??? ??? ? ? padding: 0?? ??? ??? ? ? }?? ??? ??? ? ? .hljs li {?? ??? ??? ? ? list-style: decimal-leading-zero;?? ??? ??? ? ? border-left: 1px solid #333!important;?? ??? ??? ? ? padding: 2px 5px!important;?? ??? ??? ? ? margin: 0!important;?? ??? ??? ? ? line-height: 14px;?? ??? ??? ? ? width: 100%;?? ??? ??? ? ? box-sizing: border-box ? } ? .hljs li:nth-of-type(even) { ? background-color: rgba(255,255,255,.015); ? color: inherit ? } ? ? ? .javascript{ ? ? max-height:400px; ? }
效果圖:
- 代碼塊顯示:react-highlight插件
- 代碼塊復(fù)制:react-copy-to-clipboard插件
- 代碼塊顯示行號:highlight.js插件+js代碼(上文中已注釋)+less樣式(上文中已添加)
react 代碼塊插件
代碼塊插件
vscode擴展搜索 ES7 React/Redux/GraphQL/React-Native snippetsd或者React-Native/React/Redux snippets for es6/es7 并安裝(如果安裝后者 直接cccs可以一鍵生成模板塊 安裝前者 步驟如下)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xiàn)思路
表格是在后臺管理系統(tǒng)中用的最頻繁的組件之一,相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下2019-06-06詳解在React項目中安裝并使用Less(用法總結(jié))
這篇文章主要介紹了詳解在React項目中安裝并使用Less(用法總結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03react中使用forEach或map兩種方式遍歷數(shù)組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09