feat(web): syntax highlighting for blog MDX + SDK showcase (SQLR-44) (#121)

* feat(web): syntax highlighting for blog MDX (SQLR-44)

Wire rehype-pretty-code + Shiki into the MDXRemote pipeline in
web/src/components/blog-mdx.tsx and map Shiki's --shiki-token-* CSS
variables onto the blog's existing palette tokens in globals.css so
themes stay coherent. Inline code keeps its chip styling
(bypassInlineCode) and unlanguaged fences fall back to plaintext.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(web): syntax highlighting for SDK showcase on landing

Pre-render the six SDK snippets with shiki at build time and ship the
resulting HTML to the existing client-side tab switcher. The shiki
theme (createCssVariablesTheme) and helper move to a shared
src/lib/highlight.ts so the blog MDX and the landing page reuse the
same --shiki-token-* → palette mapping. The .code-body rule in
globals.css declares the same shiki var mapping the blog does.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: joaoh82

web/README.md

@@ -146,6 +146,30 @@ backticks or escape (`<`, `\{`). The MDX renderer auto-routes
 internal `[link](/foo)` markdown links through `next/link`; external
 links open in a new tab via `rel="noreferrer"`.
 
+### Code block highlighting
+
+Code is tokenized at build time by [Shiki](https://shiki.style/). The
+shared theme + helper live in
+[`src/lib/highlight.ts`](src/lib/highlight.ts) and use
+`createCssVariablesTheme()` so Shiki emits inline styles like
+`color: var(--shiki-token-keyword)`. Each surface that needs
+highlighting then maps the `--shiki-*` variables onto the blog's
+palette tokens (`--color-kw`, `--color-str`, `--color-num`, …) in
+[`src/app/globals.css`](src/app/globals.css) — adjust colors there,
+not in the components. Two consumers:
+
+- **Blog MDX** (`src/components/blog-mdx.tsx`) — uses
+  [`rehype-pretty-code`](https://github.com/rehype-pretty/rehype-pretty-code)
+  inside the `MDXRemote` pipeline. Inline `` `code` `` keeps its chip
+  styling (`bypassInlineCode: true`); fences without a language tag
+  fall back to `plaintext` so a missing language never breaks the
+  build. Mapping lives on `.blog-article-body pre`.
+- **SDK showcase** (`src/components/sdk-showcase.tsx` —
+  server-rendered, paired with a small client wrapper for the tab
+  state) pre-renders each language snippet with `highlightCode()` and
+  embeds the resulting HTML inside `.code-body`. Mapping lives on
+  `.code-body`.
+
 The design tokens (colors, typography, spacing) live in `globals.css`'s
 `@theme` block. The page-level CSS (sections, terminal, feature grid,
 roadmap timeline, etc.) is intentionally hand-rolled — it ports the