您现在的位置是：网站首页> 编程资料编程资料

react中代码块输出,代码高亮显示,带行号,能复制的问题_React_

2023-05-24 297人已围观

简介 react中代码块输出,代码高亮显示,带行号,能复制的问题_React_

react 代码块输出,代码高亮显示,带行号,能复制

以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("入参信息") } else { setIitle("出参信息") };   }, [modalType]);     //显示行号   useEffect(() => {     if (visible) {       hljs.initHighlightingOnLoad();       document.querySelectorAll('pre code').forEach((block) => {         block.innerHTML = "" + block.innerHTML.replace(/\n/g, "\n
") + " 
";       });     }   }, [visible])     const handleCopy = () => {     message.success('复制成功！')   };     return                          ,                ]}     >                {JSON.stringify(data, null, 2)}               
; }

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;   }

效果图：