From 4d762e3e64d6de9770357ca716cc406aa5ad6345 Mon Sep 17 00:00:00 2001
From: Matias Volpe <kratico@users.noreply.github.com>
Date: Thu, 8 Jun 2023 11:39:15 -0300
Subject: [PATCH] feat: remove shiki (#1049)

---
 _tasks/dnt.ts       |  4 ----
 deps/shiki.ts       | 26 ----------------------
 import_map.json     |  2 +-
 server/factories.ts | 54 +--------------------------------------------
 4 files changed, 2 insertions(+), 84 deletions(-)
 delete mode 100644 deps/shiki.ts

diff --git a/_tasks/dnt.ts b/_tasks/dnt.ts
index ed495e6ea..7119f34d5 100755
--- a/_tasks/dnt.ts
+++ b/_tasks/dnt.ts
@@ -99,10 +99,6 @@ await Promise.all([
         name: "@substrate/smoldot-light",
         version: "0.7.6",
       },
-      "https://esm.sh/v113/shiki@0.14.1?bundle": {
-        name: "shiki",
-        version: "0.14.1",
-      },
       "./deps/shims/ws.ts": {
         name: "ws",
         version: "8.13.0",
diff --git a/deps/shiki.ts b/deps/shiki.ts
deleted file mode 100644
index d2aeaab55..000000000
--- a/deps/shiki.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as shiki from "https://esm.sh/v113/shiki@0.14.1?bundle"
-import typescriptLang from "https://unpkg.com/shiki@0.14.2/languages/typescript.tmLanguage.json" assert {
-  type: "json",
-}
-import githubDark from "https://unpkg.com/shiki@0.14.2/themes/github-dark.json" assert {
-  type: "json",
-}
-import { shikiWasm } from "../util/_artifacts/shikiWasm.ts"
-
-const isNode = "process" in globalThis
-
-shiki.setWasm(shikiWasm)
-
-// A gross hack to get the data url to work, since shiki requires the cdn to end with a slash
-shiki.setCDN("data:application/")
-
-export const highlighterPromise = shiki.getHighlighter({
-  theme: isNode ? "github-dark" : githubDark as any,
-  langs: [
-    isNode ? "ts" : {
-      id: "ts",
-      scopeName: "source.ts",
-      path: "json;base64," + btoa(JSON.stringify(typescriptLang)),
-    },
-  ],
-})
diff --git a/import_map.json b/import_map.json
index c2b3ad9c2..a9d1cf965 100644
--- a/import_map.json
+++ b/import_map.json
@@ -1,6 +1,6 @@
 {
   "imports": {
-    "@capi/": "http://localhost:4646/a6371dd9c3e070f3/"
+    "@capi/": "http://localhost:4646/371568ef82e78f0c/"
   },
   "scopes": {
     "examples/": {
diff --git a/server/factories.ts b/server/factories.ts
index 855f9cf20..0bfa1e28b 100644
--- a/server/factories.ts
+++ b/server/factories.ts
@@ -1,5 +1,3 @@
-import { escapeHtml } from "../deps/escape.ts"
-import { highlighterPromise } from "../deps/shiki.ts"
 import { Status } from "../deps/std/http.ts"
 import { CacheBase } from "../util/cache/base.ts"
 
@@ -57,59 +55,9 @@ export function acceptsHtml(request: Request): boolean {
 }
 
 export async function renderCode(code: string) {
-  const highlighter = await highlighterPromise
-  const tokens = highlighter.codeToThemedTokens(code, "ts")
-  let codeContent = ""
-  for (const line of tokens) {
-    codeContent += `<span class="line">`
-    for (const token of line) {
-      if (
-        token.explanation?.every((value) =>
-          value.scopes.some((scope) =>
-            scope.scopeName === "meta.export.ts" || scope.scopeName === "meta.import.ts"
-          )
-          && value.scopes.some((scope) => scope.scopeName === "string.quoted.double.ts")
-        )
-      ) {
-        codeContent += `<a style="color: ${token.color}" href="${
-          escapeHtml(JSON.parse(token.content))
-        }">${escapeHtml(token.content)}</a>`
-      } else {
-        codeContent += `<span style="color: ${token.color}">${escapeHtml(token.content)}</span>`
-      }
-    }
-    codeContent += "</span>\n"
-  }
-  const STYLE = `body {
-  color: ${highlighter.getForegroundColor()};
-  background-color: ${highlighter.getBackgroundColor()};
-}
-.shiki {
-  counter-reset: line;
-  counter-increment: line 0;
-}
-.shiki .line::before {
-  content: counter(line);
-  counter-increment: line;
-  width: 5ch;
-  margin-right: 2ch;
-  display: inline-block;
-  text-align: right;
-  color: rgba(115,138,148,.4)
-}
-a {
-  text-decoration-color: transparent;
-  transition: text-decoration-color .2s;
-  text-underline-offset: 2px;
-}
-a:hover {
-  text-decoration-color: currentColor;
-}
-`
   return `
-    <style>${STYLE}</style>
     <body>
-      <pre class="shiki"><code>${codeContent}</code></pre>
+      <pre>${code}</pre>
     </body>
   `
 }