快捷導航

react中代碼塊輸出,代碼高亮顯示,帶行號,能復制的問題

更新時間：2022年09月21日 11:08:29 作者：酷jjs

這篇文章主要介紹了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("入?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('復制成功！')
? };
?
? return <div>
? ? <Modal title={title} visible={visible} onCancel={handleCancel} onOk={handleOk}
? ? ? footer={[
? ? ? ? <CopyToClipboard text={JSON.stringify(data, null, 2)} onCopy={handleCopy}>
? ? ? ? ? <Button>復制</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;
? }

效果圖：