feat: Format code blocks at build time

package.json

@@ -40,6 +40,7 @@
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.0.1",
     "@popperjs/core": "^2.11.8",
+    "@prettier/plugin-xml": "^3.3.1",
     "@prisma/client": "^5.8.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-collapsible": "^1.0.3",

src/mdx.ts

@@ -21,6 +21,7 @@ import remarkCodeTabs from './remark-code-tabs';
 import remarkCodeTitles from './remark-code-title';
 import remarkComponentSpacing from './remark-component-spacing';
 import remarkExtractFrontmatter from './remark-extract-frontmatter';
+import remarkFormatCodeBlocks from './remark-format-code';
 import remarkImageSize from './remark-image-size';
 import remarkTocHeadings, {TocNode} from './remark-toc-headings';
 import remarkVariables from './remark-variables';
@@ -282,6 +283,7 @@ export async function getFileBySlug(slug: string) {
         remarkExtractFrontmatter,
         [remarkTocHeadings, {exportRef: toc}],
         remarkGfm,
+        remarkFormatCodeBlocks,
         [remarkImageSize, {sourceFolder: cwd, publicFolder: path.join(root, 'public')}],
         remarkMdxImages,
         remarkCodeTitles,

src/remark-format-code.js

@@ -0,0 +1,50 @@
+import {format} from 'prettier';
+import {visit} from 'unist-util-visit';
+
+import * as prettierConfig from '../prettier.config.js';
+
+export default function remarkFormatCodeBlocks() {
+  return async tree => {
+    const codeNodes = [];
+    visit(tree, 'code', node => {
+      codeNodes.push(node);
+    });
+    const formattingWork = codeNodes
+      // skip code blocks with diff meta as they might have
+      // broken syntax due to + and - characters
+      .filter(node => !node.meta?.includes('diff'))
+      .map(node => formatCode(node));
+
+    await Promise.all(formattingWork);
+  };
+}
+
+async function formatCode(node) {
+  const lang = node.lang;
+  const parsersConfigs = {
+    javascript: {parser: 'babel'},
+    jsx: {parser: 'babel'},
+    typescript: {parser: 'babel-ts'},
+    tsx: {parser: 'babel-ts'},
+    html: {parser: 'html'},
+    css: {parser: 'css'},
+    json: {parser: 'json'},
+    markdown: {parser: 'markdown'},
+    yaml: {parser: 'yaml'},
+    yml: {parser: 'yaml'},
+    xml: {parser: 'xml', plugins: ['@prettier/plugin-xml']},
+  };
+  const parserConfig = parsersConfigs[lang];
+  if (!parserConfig) {
+    return;
+  }
+
+  try {
+    const formattedCode = await format(node.value, {...prettierConfig, ...parserConfig});
+    // get rid of the trailing newline
+    node.value = formattedCode.trimEnd();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log(`⚠️  Error formatting code block\n${e.message}`);
+  }
+}

yarn.lock

@@ -1744,6 +1744,13 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@prettier/plugin-xml@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@prettier/plugin-xml/-/plugin-xml-3.3.1.tgz#b89fcc95b909128fa2e0691f68b34ad25052971b"
+  integrity sha512-kllNJk6n2pXJjGWdj+HAr1GhOoOTrlmeWkDYCGBzkyZS2l0K6h2gsUQcVif2cNqAE1MNC+nUrzN6QwEsCukPnQ==
+  dependencies:
+    "@xml-tools/parser" "^1.0.11"
+
 "@prisma/client@^5.8.1":
   version "5.12.1"
   resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.12.1.tgz#c26a674fea76754b3a9e8b90a11e617f90212f76"
@@ -3453,6 +3460,13 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@xml-tools/parser@^1.0.11":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@xml-tools/parser/-/parser-1.0.11.tgz#a118a14099ea5c3c537e4781fad2fc195b57f8ff"
+  integrity sha512-aKqQ077XnR+oQtHJlrAflaZaL7qZsulWc/i/ZEooar5JiWj1eLt0+Wg28cpa+XLney107wXqneC+oG1IZvxkTA==
+  dependencies:
+    chevrotain "7.1.1"
+
 abab@^2.0.3, abab@^2.0.5, abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -4092,6 +4106,13 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
+[email protected]:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/chevrotain/-/chevrotain-7.1.1.tgz#5122814eafd1585a9601f9180a7be9c42d5699c6"
+  integrity sha512-wy3mC1x4ye+O+QkEinVJkPf5u2vsrDIYW9G7ZuwFl6v/Yu0LwUuT2POsb+NUWApebyxfkQq6+yDfRExbnI5rcw==
+  dependencies:
+    regexp-to-ast "0.5.0"
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
@@ -9517,6 +9538,11 @@ regenerator-runtime@^0.14.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
+[email protected]:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/regexp-to-ast/-/regexp-to-ast-0.5.0.tgz#56c73856bee5e1fef7f73a00f1473452ab712a24"
+  integrity sha512-tlbJqcMHnPKI9zSrystikWKwHkBqu2a/Sgw01h3zFjvYrMxEDYHzzoMZnUrbIfpTFEsoRnnviOXNCzFiSc54Qw==
+
 regexp.prototype.flags@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"