react-lezer-highlighter

A simple tiny syntax highlighter for React using Lezer parsers.

Background, motivation, and design of this library is covered in this blog post.

Table of contents

• Install
• Usage
• API
• Contributing
• License

Install

npm i react-lezer-highlighter

Usage

import React from "react"
import { createRoot } from "react-dom/client"

import { Code, Parsers } from "react-lezer-highlighter"

import { parser as javascriptParser } from "@lezer/javascript"
import { parser as jsonParser } from "@lezer/json"

import "react-lezer-highlighter/styles/default.css"

const parsers = {
	js: javascriptParser,
	jsx: javascriptParser.configure({ dialects: "jsx" }),
	ts: javascriptParser.configure({ dialects: "ts" }),
	tsx: javascriptParser.configure({ dialects: "ts jsx" }),
	json: jsonParser,
	// ... import and add more languages as you see fit
}

const source = `function norm(a: number, b: number): number {
	return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))
}`

const root = createRoot(document.getElementById("root"))
root.render(
	<Parsers.Provider value={parsers}>
		<Code language="ts" source={source} />
	</Parsers.Provider>
)

API

import type React from "react"
import type { LRParser } from "@lezer/lr"

declare const Parsers: React.Context<Record<string, LRParser>>

declare interface CodeProps {
	language?: string
	source: string
}

declare const Code: React.FC<CodeProps>

Contributing

react-lezer-highlighter is meant to be a proof-of-concept reference implementation - after all, it's only 30 lines of code. I'll publish new versions to track with Lezer, and would accept PRs for additional stylesheets in styles/ if people want to create them, but it's unlikely that I want to add new features or change the basic interface.

License

MIT (c) 2024 Joel Gustafson