React Syntax Highlighter 使用教程

1. 项目的目录结构及介绍

React Syntax Highlighter 项目的目录结构如下：

react-syntax-highlighter/
├── dist/
│   ├── esm/
│   └── cjs/
├── src/
│   ├── languages/
│   ├── styles/
│   └── index.js
├── .gitignore
├── .npmignore
├── .prettierrc
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js

目录介绍

• dist/: 包含编译后的文件，分为 ES 模块 (esm/) 和 CommonJS 模块 (cjs/)。
• src/: 源代码目录，包含语言定义 (languages/)、样式定义 (styles/) 和入口文件 (index.js)。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 发布时忽略的文件配置。
• .prettierrc: Prettier 代码格式化配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: Webpack 构建配置。

2. 项目的启动文件介绍

项目的入口文件位于 src/index.js，该文件导出了 React Syntax Highlighter 组件。

// src/index.js
import SyntaxHighlighter from './core';
import { registerLanguage } from './registerLanguage';
import * as languages from './languages';
import * as styles from './styles/hljs';

export {
  SyntaxHighlighter,
  registerLanguage,
  languages,
  styles,
};

启动文件介绍

• SyntaxHighlighter: 主组件，用于语法高亮。
• registerLanguage: 用于注册自定义语言的函数。
• languages: 包含所有支持的语言定义。
• styles: 包含所有支持的样式定义。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-syntax-highlighter",
  "version": "15.4.5",
  "description": "syntax highlighting component for react with prismjs or highlightjs ast using inline styles",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "npm run build:cjs && npm run build:esm",
    "build:cjs": "webpack --config webpack.config.js --env.mode=cjs",
    "build:esm": "webpack --config webpack.config.js --env.mode=esm",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "prismjs": "^1.23.0",
    "refractor": "^3.1.0"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "babel-loader": "^8.2.2",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  },
  "license": "MIT"
}

webpack.config.js

webpack.config.js 文件用于配置 Webpack 构建过程。

const path = require('path');

module.exports = (env) => {
  const mode = env.mode || 'cjs';
  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist', mode),
      filename: 'index.js',
      libraryTarget: mode === 'cjs' ? 'commonjs2' : 'module',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude