Skip to main content

A JSX lexer for Pygments

Project description

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

jsx-lexer-2.0.0.tar.gz (3.7 kB view hashes)

Uploaded Source

Built Distribution

jsx_lexer-2.0.0-py2.py3-none-any.whl (4.1 kB view hashes)

Uploaded Python 2 Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page