react中代碼塊輸出,代碼高亮顯示,帶行號(hào),能復(fù)制的問(wèn)題
react 代碼塊輸出,代碼高亮顯示,帶行號(hào),能復(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]); ? ? //顯示行號(hào) ? 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插件
- 代碼塊顯示行號(hào):highlight.js插件+js代碼(上文中已注釋)+less樣式(上文中已添加)
react 代碼塊插件
代碼塊插件
vscode擴(kuò)展搜索 ES7 React/Redux/GraphQL/React-Native snippetsd或者React-Native/React/Redux snippets for es6/es7 并安裝(如果安裝后者 直接cccs可以一鍵生成模板塊 安裝前者 步驟如下)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
React通過(guò)conetxt實(shí)現(xiàn)多組件傳值功能
Context 提供了一種在組件之間共享此類值的方式,而不必顯式地通過(guò)組件樹(shù)的逐層傳遞 props。本文給大家介紹React通過(guò)conetxt實(shí)現(xiàn)多組件傳值功能,感興趣的朋友一起看看吧2021-10-10Vite?+?React從零開(kāi)始搭建一個(gè)開(kāi)源組件庫(kù)
這篇文章主要介紹了Vite?+?React?如何從0到1搭建一個(gè)開(kāi)源組件庫(kù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解
React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問(wèn)其授權(quán)頁(yè)面的方式,用于已登錄或具有訪問(wèn)特定頁(yè)面所需的權(quán)限,這篇文章就來(lái)記錄下React實(shí)現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下2024-07-07React 全自動(dòng)數(shù)據(jù)表格組件——BodeGrid的實(shí)現(xiàn)思路
表格是在后臺(tái)管理系統(tǒng)中用的最頻繁的組件之一,相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁(yè)、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動(dòng)數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下2019-06-06詳解在React項(xiàng)目中安裝并使用Less(用法總結(jié))
這篇文章主要介紹了詳解在React項(xiàng)目中安裝并使用Less(用法總結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03react中使用forEach或map兩種方式遍歷數(shù)組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09