欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 lazyLoad加載使用詳解

    react lazyLoad加載使用詳解

    lazy是React提供的懶(動態(tài))加載組件的方法,React.lazy(),路由組件代碼會被分開打包,能減少打包體積、延遲加載首屏不需要渲染的組件,依賴內(nèi)置組件Suspense標(biāo)簽的fallback屬性,給lazy加上loading指示器組件,Suspense目前只和lazy配合實現(xiàn)組件等待加載指示器的功能
    2023-03-03
  • react diff算法源碼解析

    react diff算法源碼解析

    這篇文章主要介紹了react diff算法源碼解析的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下
    2021-04-04
  • React通過conetxt實現(xiàn)多組件傳值功能

    React通過conetxt實現(xiàn)多組件傳值功能

    Context 提供了一種在組件之間共享此類值的方式,而不必顯式地通過組件樹的逐層傳遞 props。本文給大家介紹React通過conetxt實現(xiàn)多組件傳值功能,感興趣的朋友一起看看吧
    2021-10-10
  • Vite?+?React從零開始搭建一個開源組件庫

    Vite?+?React從零開始搭建一個開源組件庫

    這篇文章主要介紹了Vite?+?React?如何從0到1搭建一個開源組件庫,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • React實現(xiàn)路由鑒權(quán)的實例詳解

    React實現(xiàn)路由鑒權(quán)的實例詳解

    React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁面的方式,用于已登錄或具有訪問特定頁面所需的權(quán)限,這篇文章就來記錄下React實現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下
    2024-07-07
  • React 全自動數(shù)據(jù)表格組件——BodeGrid的實現(xià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é))

    這篇文章主要介紹了詳解在React項目中安裝并使用Less(用法總結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • react中使用forEach或map兩種方式遍歷數(shù)組

    react中使用forEach或map兩種方式遍歷數(shù)組

    這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React優(yōu)雅的封裝SvgIcon組件示例

    React優(yōu)雅的封裝SvgIcon組件示例

    這篇文章主要為大家介紹了React優(yōu)雅的封裝SvgIcon組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • 關(guān)于React中的聲明式渲染框架問題

    關(guān)于React中的聲明式渲染框架問題

    這篇文章主要介紹了React中的聲明式渲染框架,我們先討論了命令式和聲明式這兩種范式的差異,其中命令式更加關(guān)注過程,而聲明式更加關(guān)注結(jié)果,對React渲染框架知識感興趣的朋友跟隨小編一起看看吧
    2022-06-06

最新評論