react-syntax-highlighter

晴空万里king

于 2025-03-26 18:20:53 发布

阅读量189

点赞数 5

文章标签： npm react.js 前端

本文链接：https://blog.csdn.net/2301_78868767/article/details/146537294

版权

日志查看

npm install react-syntax-highlighter --save

使用

import {FC} from 'ract';

import {PrismAsyncLight} from 'react-syntax-highlighter';
import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
import {vscDarkPlus} from 'react-syntax-highlighter/dist/esm/styles/prism';
PrismAsyncLight.registerLanguage('python',python);
PrismAsyncLight.registerLanguage('json',json);

interface PropsType{
    logInfo:string;
}

const TrainLog:FC<PropsType>={logInfo}=> {
    return (
        <div>
            <PrismAsyncLight
                language={'json'}
                style={vscDarkPlus}
                customStyle={{margin:0}} // 自定义样式
            >
                {logInfo}
                
            </PrismAsyncLight>
        </div>
    )
}

export default TrainLog:FC;