代码高亮，增强代码的可读性

Highlight

ts 类似 propTypes.oneOf 的属性
https://stackoverflow.com/questions/45251664/derive-union-type-from-tuple-array-values

  1. import React, { useMemo, memo } from 'react';
  2. import { Highlight } from '@ant-design/pro-editor';
  3. import type { HighlightProps } from '@ant-design/pro-editor/es/Highlight/defalut';
  5. export const LanguageTypes = [
  6.   "javascript",
  7.   "typescript",
  8.   "css",
  9.   "java",
  10.   "json",
  11.   "markdown",
  12.   "xml",
  13.   "yaml",
  14.   "python",
  15.   "sql",
  16. ] as const;
  18. interface IProps extends Omit<HighlightProps, "language"> {
  19.   code: string | object;
  20.   language?: typeof LanguageTypes[number];
  21. }
  23. function HighlightCode(props: IProps) {
  24.   const {
  25.     code,
  26.     language = 'json',
  27.     theme = 'light',
  28.     type = 'pure',
  29.     lineNumber = true,
  30.     containerWrapper = true,
  31.   } = props;
  33.   const codeString = useMemo(() => {
  34.     const isObject: boolean = !!code && typeof code === 'object';
  35.     return isObject ? JSON.stringify(code, null, 2) : code;
  36.   }, [code]);
  38.   return (
  39.     <Highlight
  40.       language={language}
  41.       theme={theme}
  42.       type={type}
  43.       lineNumber={lineNumber}
  44.       containerWrapper={containerWrapper}
  45.     >
  46.       {codeString}
  47.     </Highlight>
  48.   );
  49. }
  51. export default memo(HighlightCode);

如果 Omit 报错，tsconfig.json compilerOptions 添加

  1. "typeRoots": [
  2.   "./node_modules/@types"
  3. ],

�

language 高亮语言

  • javascript
  • typescript
  • css
  • java
  • json
  • markdown
  • xml
  • yaml
  • python
  • sql

shiki

轻量级的，代码高亮库
https://github.com/shikijs/shiki

react-syntax-highlighter

https://github.com/react-syntax-highlighter/react-syntax-highlighter
https://www.npmjs.com/package/react-syntax-highlighter

react-syntax-highlighter@15.5.0 包大小
image.png

https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/
image.png

细节点：
需要按需加载，默认会加载所有语言，导致体积很大
image.png

prismjs代码高亮

https://prismjs.com
image.png
prism-json.js

  1. Prism.languages.json = {
  2.     'property': /"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
  3.     'string': {
  4.         pattern: /"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,
  5.         greedy: true
  6.     },
  7.     'number': /\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,
  8.     'punctuation': /[{}[\]);,]/,
  9.     'operator': /:/g,
  10.     'boolean': /\b(?:true|false)\b/i,
  11.     'null': /\bnull\b/i
  12. };
  14. Prism.languages.jsonp = Prism.languages.json;

highlight.js

https://github.com/highlightjs/highlight.js
image.png
https://highlightjs.org/
image.png

BSD-3-Clause license
未经事先书面许可，不得使用著作权人或其贡献者的姓名或名称来宣传或推广由本软件衍生的产品
https://www.ruanyifeng.com/blogimg/asset/201105/bg2011050101.png

zsh-syntax-highlighting

终端命令行代码高亮
https://github.com/zsh-users/zsh-syntax-highlighting