react-codemirror2使用

项目中，我们一般会遇到展示代码的需求，并且有关键字高亮等功能，下面是几种解决方法

react-codemirror2

react-codemirror2是基于codemirrir的react封装，大致用法都一致,使用也非常简单，将组件导入，然后设置需要展示的格式，以及导入主题后，将后台接口获取到的字符串传入即可

注：后台传入的字符串里面已经包含了换行格式，不然会在一行显示 其他属性可参考文档

完整代码

// 只是以代码格式展示出来，下面例子展示sql

import React from 'react';

// 引入codemirror封装
import { UnControlled as CodeMirror } from 'react-codemirror2';

import 'codemirror/lib/codemirror.css';
// 主题风格 可以自己定义
import 'codemirror/theme/blackboard.css';
// 代码模式，可以自己定义
import 'codemirror/mode/sql/sql';

interface PropsType {
  value: string;
  mode: string;
}

const ShowCodeMirror = (props: PropsType) => {
  const { value, mode } = props;
  return (
    <CodeMirror
      value={value}
      options={{
        mode,
        theme: 'blackboard',
        lineNumbers: true, // 是否显示行号
        readOnly: true,  // 是否只读
        lineWiseCopyCut: true,
        // lineWrapping: true,
      }}
      // 设置尺寸
      editorDidMount={(editor) => {
        editor.setSize('auto', 'auto');
      }}
      onChange={(editor: any, data: any, value: string) => {}}
      onBeforeChange={(editor: any, data: any, value: string) => {}}
    />
  );
};

export default React.memo(ShowCodeMirror);

react-syntax-highlighter

注意： 要声明定义文件，在同级目录下新建一个 declaration.d.ts文件

// declaration.d.ts
declare module 'react-syntax-highlighter/dist/esm/styles/hljs';
declare module 'react-syntax-highlighter';

index.ts

import React from 'react';

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

interface Iprops {
codeString: string;
type: string;
}

const ReactHightLighter: React.FC<Iprops> = (props) => {
const { codeString, type } = props;
return (
  <SyntaxHighlighter
    codeTagProps={{ style: { color: 'rgba(0, 0, 0, 0.85)' } }}
    showLineNumbers
    language={type}
    style={docco}
  >
    {codeString}
  </SyntaxHighlighter>
);
};

export default ReactHightLighter;

highlight

import React, { useEffect, useRef } from 'react';
import hljs from 'highlight.js';
import json from 'highlight.js/lib/languages/json';
import python from 'highlight.js/lib/languages/python.js.js';
import 'highlight.js/styles/default.css';
import styles from './index.less';

hljs.registerLanguage('json', json);
hljs.registerLanguage('python', python);

interface IProps {
  code: string;
  type: 'json' | 'python' | 'plaintext';
}

const HighlightCode = (props: IProps) => {
  const refCode = useRef<HTMLElement>(null);

  useEffect(() => {
    const codeElem = refCode.current;
    if (codeElem) {
      if (props.code) {
        const res = hljs.highlight(props.code, { language: props.type }).value;
        codeElem.innerHTML = res;
      } else {
        codeElem.innerHTML = '';
      }
    }
  }, [props.code, props.type]);

  return (
    <pre>
      <code className={`${styles.code} hljs`} ref={refCode} />
    </pre>
  );
};

export default HighlightCode;

.code {
  background-color: #fff;
  border: 1px solid #ccc;
  &,
  & span {
    font-weight: normal;
    font-size: 12px;
    font-family: Menlo, Monaco, 'Courier New', monospace;
    line-height: 18px;
    letter-spacing: 0;
    font-feature-settings: 'liga' 0, 'calt' 0;
  }
}
:global(.hljs-keyword) {
  color: #af00db;
}
:global(.hljs-comment) {
  color: #008000;
}