https://github.com/fcurella/jsx-lexer

a JSX lexer for pygments
https://github.com/fcurella/jsx-lexer

docs jsx pygments python sphinx

Last synced: 9 days ago
JSON representation

a JSX lexer for pygments

• Host: GitHub
• URL: https://github.com/fcurella/jsx-lexer
• Owner: fcurella
• License: mit
• Created: 2017-05-12T15:22:42.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-05-16T15:16:22.000Z (over 1 year ago)
• Last Synced: 2024-10-14T21:51:47.553Z (22 days ago)
• Topics: docs, jsx, pygments, python, sphinx
• Language: Python
• Size: 69.3 KB
• Stars: 38
• Watchers: 3
• Forks: 12
• Open Issues: 8
• Metadata Files:
  • Readme: README.rst
  • License: LICENSE

Awesome Lists containing this project

README

        
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 }) => (

          
{children}

        );

        // class component

        class BlogPost extends React.Component {

          renderTitle(title) {

            return {title}

          };

          render() {

            return (

            


              {this.renderTitle(this.props.title)}

              
{this.props.body}

            

            );

          }

        }


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 }) => (

      
{children}

    );

    // class component

    class BlogPost extends React.Component {

      renderTitle(title) {

        return {title}

      };

      render() {

        return (

        


          {this.renderTitle(this.props.title)}

          
{this.props.body}

        

        );

      }

    }

    ```


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 }) => (

          
{children}

        );

        // class component

        class BlogPost extends React.Component {

          renderTitle(title) {

            return {title}

          };

          render() {

            return (

            


              {this.renderTitle(this.props.title)}

              
{this.props.body}

            

            );

          }

        }

    \end{minted}


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