update code box theme and highlighting (#617)

* style: update theme references from tokyo-night to vitesse-dark

* style: update theme references from tokyo-night to vitesse-dark

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: LadyBluenotes

src/components/Markdown.tsx

@@ -176,7 +176,7 @@ export function CodeBlock({
       <pre ref={ref} className={`shiki github-light h-full`}>
         <code>{lang === 'mermaid' ? <svg /> : code}</code>
       </pre>
-      <pre className={`shiki tokyo-night`}>
+      <pre className={`shiki vitesse-dark`}>
         <code>{lang === 'mermaid' ? <svg /> : code}</code>
       </pre>
     </>,
@@ -186,7 +186,7 @@ export function CodeBlock({
     typeof document !== 'undefined' ? 'useLayoutEffect' : 'useEffect'
   ](() => {
     ;(async () => {
-      const themes = ['github-light', 'tokyo-night']
+      const themes = ['github-light', 'vitesse-dark']
       const normalizedLang = LANG_ALIASES[lang] || lang
       const effectiveLang =
         normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
@@ -302,7 +302,7 @@ let highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null
 async function getHighlighter(language: string) {
   if (!highlighterPromise) {
     highlighterPromise = createHighlighter({
-      themes: ['github-light', 'tokyo-night'],
+      themes: ['github-light', 'vitesse-dark'],
       langs: [
         'typescript',
         'javascript',

src/styles/app.css

@@ -343,7 +343,7 @@ pre {
 pre.shiki {
   overflow-x: auto;
 
-  &.tokyo-night {
+  &.vitesse-dark {
     @apply text-gray-400;
   }
 }
@@ -371,12 +371,26 @@ pre.shiki .language-id {
   display: none;
 }
 
+span.line {
+  display: inline-block;
+  width: 100%;
+}
+
+pre.has-diff span.diff {
+  width: calc(100% + 20px);
+  margin-left: -10px;
+  padding-right: 20px;
+  padding-left: 10px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
 pre.has-diff span.remove {
-  background-color: #ff000036;
+  background-color: #f43f5e29;
 }
 
 pre.has-diff span.add {
-  background-color: #00ff0036;
+  background-color: #10b98129;
 }
 /* Visually differentiates twoslash code samples  */
 pre.twoslash {
@@ -650,7 +664,7 @@ pre .logger.log-log svg {
   margin-right: 9px;
 }
 
-html:not(.dark) .shiki.tokyo-night {
+html:not(.dark) .shiki.vitesse-dark {
   display: none;
 }
 
@@ -659,11 +673,11 @@ html.dark .shiki.github-light {
 }
 
 /* Improve comment contrast in dark mode */
-html.dark .shiki.tokyo-night .token.comment,
-html.dark .shiki.tokyo-night span[style*='color:#565F89'],
-html.dark .shiki.tokyo-night span[style*='color: #565F89'],
-html.dark .shiki.tokyo-night span[style*='color:#51597D'],
-html.dark .shiki.tokyo-night span[style*='color: #51597D'] {
+html.dark .shiki.vitesse-dark .token.comment,
+html.dark .shiki.vitesse-dark span[style*='color:#565F89'],
+html.dark .shiki.vitesse-dark span[style*='color: #565F89'],
+html.dark .shiki.vitesse-dark span[style*='color:#51597D'],
+html.dark .shiki.vitesse-dark span[style*='color: #51597D'] {
   color: #9099c0 !important;
 }