feat: check code examples syntax

apps/site/next.mdx.shiki.mjs

@@ -1,5 +1,6 @@
 'use strict';
 
+import { parse } from 'acorn';
 import classNames from 'classnames';
 import { toString } from 'hast-util-to-string';
 import { SKIP, visit } from 'unist-util-visit';
@@ -53,6 +54,29 @@ function isCodeBlock(node) {
   );
 }
 
+/**
+ * Check code syntax is valid.
+ *
+ * @param {string} code - The code to be checked.
+ * @param {string} languageId - The language id.
+ * @returns {boolean}
+ */
+function checkCodeSyntax(code, languageId) {
+  try {
+    if (!['js', 'cjs', 'mjs'].includes(languageId)) {
+      return true;
+    }
+
+    parse(code, {
+      ecmaVersion: 'latest',
+      sourceType: languageId === 'cjs' ? 'script' : 'module',
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 export default function rehypeShikiji() {
   return function (tree) {
     visit(tree, 'element', (_, index, parent) => {
@@ -168,6 +192,11 @@ export default function rehypeShikiji() {
       // Grabs the relevant alias/name of the language
       const languageId = codeLanguage.slice(languagePrefix.length);
 
+      // Check code for syntax errors
+      if (!checkCodeSyntax(preElementContents, languageId)) {
+        throw new Error('Code block contains syntax errors');
+      }
+
       // Parses the <pre> contents and returns a HAST tree with the highlighted code
       const { children } = highlightToHast(preElementContents, languageId);
 

package.json

@@ -35,6 +35,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "acorn": "^8.14.0",
     "husky": "9.1.7",
     "lint-staged": "15.3.0",
     "turbo": "2.3.3"