Upgrade Shiki and switch to GitHub Light High Contrast theme for code blocks

Author: eslteacher902010

src/components/AnnotatedCode/index.astro

@@ -52,9 +52,12 @@ const code = rows.map((row) => row.code).join('');
 // Convert it to HTML with style tags
 const html = await codeToHtml(code, {
   lang: props.lang || 'javascript',
-  theme: props.theme || 'github-light',
+  theme: props.theme || 'github-light-high-contrast',
 })
 
+console.log("Shiki theme in use:", props.theme || 'github-light-high-contrast');
+console.log(html.slice(0, 300));
+
 // Turn it into a DOM tree we can query
 const parsed = new JSDOM(html)
 const dom = parsed.window.document

src/components/CodeEmbed/index.jsx

@@ -8,6 +8,8 @@ import { CodeFrame } from "./frame";
 import { CopyCodeButton } from "../CopyCodeButton";
 import CircleButton from "../CircleButton";
 import { Icon } from "../Icon";
+import { githubLightHighContrast } from '@uiw/codemirror-theme-github';
+
 /*
  * A more featured code embed component that uses CodeMirror
  *
@@ -123,7 +125,7 @@ export const CodeEmbed = (props) => {
       <div className="code-editor-container relative w-full">
         <CodeMirror
           value={codeString}
-          theme="light"
+          theme= {githubLightHighContrast}
           width="100%"
           minimalSetup={{
             highlightSpecialChars: false,