jsx-lexer

.. image:: https://travis-ci.org/fcurella/jsx-lexer.svg?branch=master :target: https://travis-ci.org/fcurella/jsx-lexer

.. image:: https://coveralls.io/repos/github/fcurella/jsx-lexer/badge.svg?branch=master :target: https://coveralls.io/github/fcurella/jsx-lexer?branch=master

A JSX lexer for Pygments

Installation

.. code-block:: sh

$ pip install jsx-lexer

Usage with Sphinx

To use within Sphinx, simply specify jsx for your 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>
        );
      }
    }

Usage with mkdocs

First, you need to create the CSS for the highlighting:

.. code-block:: bash

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

Then, add the following to your mkdocs.yml:

.. code-block:: yaml

markdown_extensions: - codehilite extra_css: [pygments.css]

Now, you can use jsx in your code blocks::

```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>
    );
  }
}
```

Usage with Overleaf

First, add the minted package in your main file:

.. code-block:: latex

\usepackage{minted}

Then, download the lexer.py_ file from this project, and place it in your root folder in Overleaf.

.. _lexer.py: jsx/lexer.py

Now, you can use {lexer.py:JsxLexer -x} in front of your minted code blocks:

.. code-block:: latex

\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}

You can find an example of the lexer in use on Overleaf here: https://www.overleaf.com/read/xvsytqzkvdjb