Skip to main content
https://travis-ci.org/fcurella/jsx-lexer.svg?branch=master https://coveralls.io/repos/github/fcurella/jsx-lexer/badge.svg?branch=master

A JSX lexer for Pygments

Installation

$ 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:

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

Then, add the following to your mkdocs.yml:

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:

\usepackage{minted}

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

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

\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

Metadata

Release files for jsx-lexer 2.0.1

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for jsx-lexer 2.0.1
File Size Uploaded
jsx-lexer-2.0.1.tar.gz 4.0 kB Details

Built distribution (wheel)

Table of built distributions (wheels) for jsx-lexer 2.0.1
File Interpreter ABI Platform
jsx_lexer-2.0.1-py2.py3-none-any.whl Python 2, Python 3 none any Details

Total release size: 8.1 kB

Release files / jsx-lexer-2.0.1.tar.gz

Download URL jsx-lexer-2.0.1.tar.gz
Size 4.0 kB
Tags Source
SHA-256 checksum
How to use checksums
0d9aa653e74d7973d74021dde8349896c0df094d8e40349b92b35e0930ed7f71
BLAKE2b-256 checksum
How to use checksums
37888678fcb9f7db1aa7efb338d58f320203b74e865a12583c108291ed9d3df7
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/4.0.2 CPython/3.10.5

Release files / jsx_lexer-2.0.1-py2.py3-none-any.whl

Download URL jsx_lexer-2.0.1-py2.py3-none-any.whl
Size 4.1 kB
Tags Python 2 Python 3
SHA-256 checksum
How to use checksums
508a08757764356aa36fd703596fdd59f789104f44b6568c7a14e27e62e57ad4
BLAKE2b-256 checksum
How to use checksums
2f2d6369d2f3ce55cee200202e37435601e5e50d575c2f8ffb367129e584f3f5
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No
Uploaded via twine/4.0.2 CPython/3.10.5

Release history Release notifications | RSS feed

This release

2.0.1 This release

2 release files

2.0.0

2 release files

1.0.0

2 release files

0.0.8

2 release files

0.0.7

2 release files

0.0.6

2 release files

0.0.5

2 release files

0.0.4

2 release files

0.0.3

2 release files

0.0.2

2 release files

0.0.1

2 release files

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page