Merge pull request solidjs#1259 from solidjs/fix-dev-overlay-stuff

Fix dev overlay stuff
rishabhDev2700 · Jan 15, 2024 · 3014833 · 3014833
2 parents d4402f5 + fefcf2d
commit 3014833
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/start/shared/dev-overlay/CodeView.tsx b/packages/start/shared/dev-overlay/CodeView.tsx
@@ -1,8 +1,9 @@
 import type { BuiltinLanguage, Highlighter } from 'shikiji';
-import { getHighlighterCore } from 'shikiji/core';
-import { getWasmInlined } from 'shikiji/wasm';
+import { getHighlighterCore, loadWasm } from 'shikiji/core';
 import { createEffect, createResource, type JSX } from 'solid-js';
 
+import url from 'shikiji/onig.wasm?url';
+
 import langJS from 'shikiji/langs/javascript.mjs';
 import langJSX from 'shikiji/langs/jsx.mjs';
 import langTSX from 'shikiji/langs/tsx.mjs';
@@ -13,6 +14,7 @@ let HIGHLIGHTER: Highlighter;
 
 async function loadHighlighter() {
   if (!HIGHLIGHTER) {
+    await loadWasm(await fetch(url))
     HIGHLIGHTER = await getHighlighterCore({
       themes: [
         darkPlus,
@@ -23,7 +25,6 @@ async function loadHighlighter() {
         langTS,
         langTSX,
       ],
-      loadWasm: getWasmInlined,
     });
   }
   return HIGHLIGHTER;
@@ -77,7 +78,7 @@ export function CodeView(props: CodeViewProps): JSX.Element | null {
       for (let i = 0, len = lines.length; i < len; i++) {
         const el = lines[i];
         if ((props.line - minLine() - 1) === i) {
-          el.innerHTML = `<mark style="background-color:#aaaaaa80">${el.innerHTML}</mark>`;
+          el.classList.add('dev-overlay-error-line');
         }
       }
     }

diff --git a/packages/start/shared/dev-overlay/styles.css b/packages/start/shared/dev-overlay/styles.css
@@ -281,4 +281,8 @@
   display: inline-block;
   text-align: right;
   color: rgba(115, 138, 148, .4)
+}
+
+.dev-overlay-error-line {
+  background-color: rgba(239, 68, 68, .4);
 }