A tiny syntax highlighter for React using Lezer parsers
npm install react-lezer-highlighter   !TypeScript types
A simple tiny syntax highlighter for React using Lezer parsers.
Background, motivation, and design of this library is covered in this blog post.
- Install
- Usage
- API
- Contributing
- License
```
npm i react-lezer-highlighter
`tsx
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(
);
`

`ts
import type React from "react";
import type { LRParser } from "@lezer/lr";
declare const Parsers: React.Context
declare interface CodeProps {
source: string;
language?: string;
className?: string | ((language?: string) => string);
}
declare const Code: React.FC
`
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.
MIT (c) 2024 Joel Gustafson