jsx-lexer 2.0.1

安装

$ pip install jsx-lexer

与Sphinx一起使用

要在Sphinx中使用，只需指定jsx作为您的code-block

.. code-block:: jsx

    const BlogTitle = ({ children }) => (
      <h3>{children}</h3>
    );
    // class component
    class BlogPost extends React.Component {
      renderTitle(title) {
        return <BlogTitle>{title}</BlogTitle>
      };
      render() {
        return (
        <div className="blog-body">
          {this.renderTitle(this.props.title)}
          <p>{this.props.body}</p>
        </div>
        );
      }
    }

与mkdocs一起使用

首先，您需要创建用于高亮的CSS

$ pygmentize -S default -f html -a .codehilite > code/pygments.css

然后，将以下内容添加到您的mkdocs.yml

markdown_extensions:
  - codehilite
extra_css: [pygments.css]

现在，您可以在代码块中使用jsx

```jsx
const BlogTitle = ({ children }) => (
  <h3>{children}</h3>
);
// class component
class BlogPost extends React.Component {
  renderTitle(title) {
    return <BlogTitle>{title}</BlogTitle>
  };
  render() {
    return (
    <div className="blog-body">
      {this.renderTitle(this.props.title)}
      <p>{this.props.body}</p>
    </div>
    );
  }
}
```

与Overleaf一起使用

首先，在主文件中添加minted包

\usepackage{minted}

然后，从这个项目中下载lexer.py文件，并将其放置在Overleaf的根目录中。

现在，您可以在minted代码块前使用{lexer.py:JsxLexer -x}

\begin{minted}{lexer.py:JsxLexer -x}
    const BlogTitle = ({ children }) => (
      <h3>{children}</h3>
    );
    // class component
    class BlogPost extends React.Component {
      renderTitle(title) {
        return <BlogTitle>{title}</BlogTitle>
      };
      render() {
        return (
        <div className="blog-body">
          {this.renderTitle(this.props.title)}
          <p>{this.props.body}</p>
        </div>
        );
      }
    }
\end{minted}

您可以在Overleaf上找到 lexer 的使用示例：https://www.overleaf.com/read/xvsytqzkvdjb