Lezer syntax highlighting (#59)

ast/src/expression.rs

@@ -19,6 +19,9 @@ pub enum Expression {
     /// Literal number.
     Number(Decimal),
 
+    /// A named local variable.
+    Identifier(String),
+
     /// Literal list.
     List(Vec<SpannedExpression>),
 
@@ -31,9 +34,6 @@ pub enum Expression {
         body: Box<SpannedExpression>,
     },
 
-    /// A named local variable.
-    Identifier(String),
-
     /// An operation on a single [`Expression`] operand with an [`Operator`]
     Unary {
         right: Box<SpannedExpression>,

docs/next.config.mjs

@@ -1,35 +1,40 @@
 /* eslint-env node */
 
-import { getHighlighter, BUNDLED_LANGUAGES } from 'shiki'
 import Nextra from 'nextra'
-import { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
+import rehypeHighlightCodeBlock from '@mapbox/rehype-highlight-code-block'
+import { fromLezer } from 'hast-util-from-lezer'
+import { parser as rimuParser } from 'rimu-lezer'
+import { toHtml } from 'hast-util-to-html'
 
-const __dirname = dirname(fileURLToPath(import.meta.url))
+const lezerParsers = {
+  rimu: rimuParser,
+}
 
 const withNextra = Nextra({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.js',
   unstable_staticImage: true,
+  codeHighlight: false,
   mdxOptions: {
-    rehypePrettyCodeOptions: {
-      getHighlighter: (options) =>
-        getHighlighter({
-          ...options,
-          langs: [
-            ...BUNDLED_LANGUAGES,
-            {
-              id: 'rimu',
-              scopeName: 'source.rimu',
-              aliases: [],
-              path: join(__dirname, '../syntax/textmate/rimu.tmLanguage.json'),
-            },
-          ],
-        }),
-    },
+    rehypePlugins: [
+      [
+        rehypeHighlightCodeBlock,
+        {
+          highlight,
+        },
+      ],
+    ],
   },
 })
 
 const config = withNextra()
 
 export default config
+
+function highlight(code, lang) {
+  const parser = lezerParsers[lang]
+  if (parser == null) return code
+  const tree = parser.parse(code)
+  const element = fromLezer(code, tree)
+  return toHtml(element)
+}

docs/package.json

@@ -9,10 +9,14 @@
     "start": "next start"
   },
   "dependencies": {
+    "@mapbox/rehype-highlight-code-block": "^1.0.0",
+    "hast-util-from-lezer": "^0.5.2",
+    "hast-util-to-html": "^9.0.0",
     "next": "13.4.19",
     "nextra": "2.11.1",
     "nextra-theme-docs": "2.11.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "rimu-lezer": "file:../syntax/lezer"
   }
 }

docs/pages/_app.js

@@ -0,0 +1,5 @@
+import '../styles.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

docs/pages/language/blocks.mdx

@@ -93,18 +93,29 @@ TODO
 
 ### `if`
 
-<iframe
-  width="100%"
-  height="256"
-  style={{ marginTop: "2rem" }}
-  src="https://play.rimu.dev/?i=bRYxBCoQwDEWv8skJnFkKepJsKkRUtJE2Za5v28C4-3mPPAr3fcrIEVjUTK8-gX3Fd8CMz-C3bRLBdEiImcmZnFkqs6QlS-p4UbXcEzXAFJgwTT4abBX__e22jVWsJblqsVdpsb-lBw"
-/>
+```rimu
+apple:
+  bottom:
+    if 20 > 10
+    then "jeans"
+    else "trousers"
+boots:
+  if "a" == "a"
+  then
+    with: "fur"
+  else
+    without: "fur"
+```
 
 ### `let`
 
-<iframe
-  width="100%"
-  height="256"
-  style={{ marginTop: "2rem" }}
-  src="https://play.rimu.dev/?i=bU8pJLYnJU1BITEmxUtBI1FFI0lSwtVNIVNBWSAKJF5cmlRQlJpcgSYKEgRoUdEEqMvOQVUGkdEGmaRga6CgYGWjChIwNlAA"
-/>
+```rimu
+let
+  add: (a, b) => a + b
+  subtract: (a, b) =>
+    a - b
+in
+  subtract
+    - add(10, 20)
+    - 30
+```