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

目录react代码块输出,代码高亮显示,带行号,能复制以modal组件为例infoModal.less样式react代码块插件代码块插件react代码块输出,代码高亮显示,带行号,能复制以mod...

目录

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 = "<ul id='ulcode'><li>" + block.innerHTML.replace(/\n/g, "\n</li><li>") + " </li></ul>";
   });
  }
 }, [visible])

 const handleCopy = () => {
  message.success('复制成功！')
 };

 return <div>
  <Modal title={title} visible={visible} onCancel={handleCancel} onOk={handleOk}
   footer={[
    <CopyToClipwww.cppcns.comboard text={JSON.stringify(data, null, 2)} onCopy={handleCopy}>
     <Button>复制</Button>
    </CopyToClipboard>,
    <Button key="submit" type="primary" onClick={handle编程客栈Cancel}>确定</Button>
 bOmEtgRS  ]}
  >
   <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 代码块插件

代码块插件

vscode扩展搜索 ES7 React/Redux/GraphQL/React-Native snippetsd或者React-Native/React/Redux snippets for es6/es7 并安装（如果安装后者 直接cccs可以一键生成模板块 安装前者 步骤如下）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。