fix: render dual-theme syntax-highlighted code blocks for light/dark modes

Author: thierryoliveira

site_jaspr/lib/components/safe_code_block.dart

@@ -1,17 +1,31 @@
+import 'package:jaspr/dom.dart';
 import 'package:jaspr/server.dart';
 import 'package:jaspr_content/components/code_block.dart';
 import 'package:jaspr_content/jaspr_content.dart';
 import 'package:syntax_highlight_lite/syntax_highlight_lite.dart' hide Color;
 
-/// A code block component that gracefully handles unsupported languages
-/// by falling back to plain text rendering.
+/// A code block that renders syntax-highlighted code in **both** light and
+/// dark themes at server-render time, toggling visibility via CSS.
+///
+/// Docusaurus uses `prism-react-renderer` with:
+///   - light: vsLight  →  [HighlighterTheme.loadLightTheme()] (Light VS + Light+)
+///   - dark:  vsDark   →  [HighlighterTheme.loadDarkTheme()]  (Dark VS + Dark+)
+///
+/// Both [pre] elements are emitted into the HTML; CSS hides the inactive one:
+///   `.syntax-dark  { display: none }`
+///   `[data-theme="dark"] .syntax-light { display: none }`
+///   `[data-theme="dark"] .syntax-dark  { display: block }`
+///
+/// Falls back to [CodeBlock.from] (plain, no highlighting) for any language
+/// not in [grammars].
 class SafeCodeBlock extends CustomComponent {
   SafeCodeBlock({this.grammars = const {}}) : super.base();
 
   final Map<String, String> grammars;
 
   bool _initialized = false;
-  HighlighterTheme? _theme;
+  HighlighterTheme? _lightTheme;
+  HighlighterTheme? _darkTheme;
 
   @override
   Component? create(Node node, NodesBuilder builder) {
@@ -36,23 +50,88 @@ class SafeCodeBlock extends CustomComponent {
 
       final source = children?.map((c) => c.innerText).join(' ') ?? '';
 
-      // Fall back to plain rendering for unsupported languages.
+      // Fall back to plain (unhighlighted) rendering for unsupported languages.
       if (language != null && !_supportedLanguages.contains(language)) {
         return CodeBlock.from(source: source);
       }
 
       return AsyncBuilder(
         builder: (context) async {
-          final highlighter = Highlighter(
-            language: language ?? 'dart',
-            theme: _theme ??= await HighlighterTheme.loadDarkTheme(),
+          _lightTheme ??= await HighlighterTheme.loadLightTheme();
+          _darkTheme ??= await HighlighterTheme.loadDarkTheme();
+
+          final lang = language ?? 'dart';
+          return _DualCodeBlock(
+            source: source,
+            lightHighlighter: Highlighter(language: lang, theme: _lightTheme!),
+            darkHighlighter: Highlighter(language: lang, theme: _darkTheme!),
           );
-          return CodeBlock.from(source: source, highlighter: highlighter);
         },
       );
     }
     return null;
   }
 
   Set<String> get _supportedLanguages => {'dart', ...grammars.keys};
+
+  @css
+  static List<StyleRule> get styles => [
+    // Light theme visible by default; dark theme hidden.
+    css('.syntax-dark').styles(display: Display.none),
+    // Swap in dark mode.
+    css('[data-theme="dark"] .syntax-light').styles(display: Display.none),
+    css('[data-theme="dark"] .syntax-dark').styles(display: Display.block),
+  ];
+}
+
+/// Emits two [pre] blocks (one per theme) inside a `.code-block` wrapper.
+/// CSS decides which is shown based on `[data-theme]`.
+class _DualCodeBlock extends StatelessComponent {
+  const _DualCodeBlock({
+    required this.source,
+    required this.lightHighlighter,
+    required this.darkHighlighter,
+  });
+
+  final String source;
+  final Highlighter lightHighlighter;
+  final Highlighter darkHighlighter;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'code-block', [
+      pre(classes: 'syntax-light', [
+        code([_buildSpan(lightHighlighter.highlight(source))]),
+      ]),
+      pre(classes: 'syntax-dark', [
+        code([_buildSpan(darkHighlighter.highlight(source))]),
+      ]),
+    ]);
+  }
+
+  /// Converts a [TextSpan] tree from the highlighter into jaspr [Component]s
+  /// with inline styles — mirrors `_CodeBlock.buildSpan` from jaspr_content.
+  static Component _buildSpan(TextSpan textSpan) {
+    Styles? styles;
+
+    if (textSpan.style case final style?) {
+      styles = Styles(
+        color: Color.value(style.foreground.argb & 0x00FFFFFF),
+        fontWeight: style.bold ? FontWeight.bold : null,
+        fontStyle: style.italic ? FontStyle.italic : null,
+        textDecoration: style.underline
+            ? TextDecoration(line: TextDecorationLine.underline)
+            : null,
+      );
+    }
+
+    if (styles == null && textSpan.children.isEmpty) {
+      return Component.text(textSpan.text ?? '');
+    }
+
+    return span(styles: styles, [
+      if (textSpan.text != null) Component.text(textSpan.text!),
+      for (final child in textSpan.children) _buildSpan(child),
+    ]);
+  }
 }

site_jaspr/lib/main.server.options.dart

@@ -22,6 +22,7 @@ import 'package:site_jaspr/components/edit_page_link.dart' as _edit_page_link;
 import 'package:site_jaspr/components/icon_link.dart' as _icon_link;
 import 'package:site_jaspr/components/nav_link.dart' as _nav_link;
 import 'package:site_jaspr/components/page_navigation.dart' as _page_navigation;
+import 'package:site_jaspr/components/safe_code_block.dart' as _safe_code_block;
 import 'package:site_jaspr/components/site_footer.dart' as _site_footer;
 
 /// Default [ServerOptions] for use with your Jaspr project.
@@ -71,6 +72,7 @@ ServerOptions get defaultServerOptions => ServerOptions(
     ..._icon_link.IconLink.styles,
     ..._nav_link.NavLink.styles,
     ..._page_navigation.PageNavigation.styles,
+    ..._safe_code_block.SafeCodeBlock.styles,
     ..._site_footer.SiteFooter.styles,
   ],
 );