Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Mostly working JSX lexer for Pygments
# -*- coding: utf-8 -*-
Lexers for JSX formats.
Based on
import re
from pygments.lexer import bygroups, include, default, using
from pygments.lexers.javascript import JavascriptLexer
from pygments.token import Comment, Name, Operator, Punctuation, String, Text
# Use same tokens as `JavascriptLexer`, but with tags and attributes support
TOKENS = JavascriptLexer.tokens
"jsx": [
(r"(<)(/?)(>)", bygroups(Punctuation, Punctuation, Punctuation)), # JSXFragment <>|</>
(r"(<)([\w]+)(\.?)", bygroups(Punctuation, Name.Tag, Punctuation), "tag"),
(r"(?<=[^=][>}])[^<>{}()\[\];]+(?=[{<])", Text, "children"),
(r"(<)(/)([\w]+)(>)", bygroups(Punctuation, Punctuation, Name.Tag, Punctuation)),
(r"(<)(/)([\w]+)", bygroups(Punctuation, Punctuation, Name.Tag), "fragment") # Same for React.Context
"tag": [
(r"\s+", Text),
(r"([\w]+\s*)(=)(\s*)", bygroups(Name.Attribute, Operator, Text), "attr"),
(r"({)(\/\*[\s\S]*?\*\/)(})", bygroups(Punctuation, Comment.Multiline, Punctuation)),
(r"[{}]+", Punctuation),
(r"[\w\.]+", Name.Attribute),
(r"(/?)(\s*)(>)", bygroups(Punctuation, Text, Punctuation), "#pop")
"children": [
(r"(>)(\s*?)([\)]?;)", bygroups(Punctuation, Text, Punctuation), "#pop"),
"fragment": [
(r"(.)([\w]+)", bygroups(Punctuation, Name.Attribute)),
(r"(>)", bygroups(Punctuation), "#pop")
"attr": [
("{", Punctuation, "expression"),
('".*?"', String, "#pop"),
("'.*?'", String, "#pop"),
"expression": [
("{", Punctuation, "#push"),
("}", Punctuation, "#pop"),
TOKENS["root"].insert(0, include("jsx"))
class JsxLexer(JavascriptLexer):
Lexer for JSX.
name = "JSX"
aliases = ["jsx", "react"]
filenames = ["*.jsx", "*.react"]
mimetypes = ["text/jsx", "text/typescript-jsx"]
flags = re.MULTILINE | re.DOTALL | re.UNICODE
tokens = TOKENS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment