docs: update orchestration docs

packages/website/src/docs-rehype.ts

@@ -1,8 +1,52 @@
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import { rehypePrettyCode } from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
+import { createHighlighterCore, type HighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import type { PluggableList } from "unified";
 
+export const docsRemarkPlugins: PluggableList = [remarkGfm];
+
+let docsHighlighter: Promise<HighlighterCore> | undefined;
+
+function getDocsHighlighter(): Promise<HighlighterCore> {
+  docsHighlighter ??= Promise.all([
+    import("shiki/themes/catppuccin-mocha.mjs"),
+    import("shiki/langs/bash.mjs"),
+    import("shiki/langs/json.mjs"),
+    import("shiki/langs/javascript.mjs"),
+    import("shiki/langs/typescript.mjs"),
+    import("shiki/langs/tsx.mjs"),
+    import("shiki/langs/yaml.mjs"),
+    import("shiki/langs/markdown.mjs"),
+  ]).then(([theme, bash, json, javascript, typescript, tsx, yaml, markdown]) =>
+    createHighlighterCore({
+      themes: [theme.default],
+      langs: [
+        bash.default,
+        json.default,
+        javascript.default,
+        typescript.default,
+        tsx.default,
+        yaml.default,
+        markdown.default,
+      ],
+      engine: createJavaScriptRegexEngine(),
+    }),
+  );
+  return docsHighlighter;
+}
+
 export const docsRehypePlugins: PluggableList = [
+  [
+    rehypePrettyCode,
+    {
+      theme: "catppuccin-mocha",
+      keepBackground: false,
+      getHighlighter: getDocsHighlighter,
+    },
+  ],
   rehypeSlug,
   [
     rehypeAutolinkHeadings,