Replace highlight to shiki

Author: fwqaaq

deno.jsonc

@@ -28,9 +28,9 @@
     "remark-rehype": "https://esm.sh/[email protected]",
     "rehype-raw": "https://esm.sh/[email protected]",
     "rehype-stringify": "https://esm.sh/[email protected]",
-    "rehype-highlight": "https://esm.sh/[email protected]",
     "rehype-slug": "https://esm.sh/[email protected]",
     "rehype-autolink-headings": "https://esm.sh/[email protected]",
+    "@shikijs/rehype": "https://esm.sh/@shikijs/[email protected]",
     "remark-gfm": "https://esm.sh/[email protected]",
     "yaml": "https://deno.land/[email protected]/yaml/mod.ts",
     "Command": "https://deno.land/x/[email protected]/command/mod.ts",

main.js

@@ -61,8 +61,7 @@ function getArchive(title, iters) {
     (acc, { date, summary }) => {
       const place = `/./posts/${handleUTC(date)}/`
       return acc +
-        `<p><a class="decoration-line" href=${place} target="_blank"> ${summary} ··· ${
-          convertToUSA(date)
+        `<p><a class="decoration-line" href=${place} target="_blank"> ${summary} ··· ${convertToUSA(date)
         }</a></p>`
     },
     '',
@@ -180,10 +179,9 @@ async function Others() {
   const sitemap = new URL('./sitemap.xml', dist)
   const itemsSitemap = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-${
-    metaData.reduce((acc, { date }) =>
-      `${acc}<url><loc>${website}posts/${handleUTC(date)}/</loc></url>`, '')
-  }
+${metaData.reduce((acc, { date }) =>
+    `${acc}<url><loc>${website}posts/${handleUTC(date)}/</loc></url>`, '')
+    }
 </urlset>`
 
   // robots
@@ -243,7 +241,7 @@ async function Home() {
         ? new URL('./index.html', dist)
         : new URL(`${cur}/index.html`, homeDest)
 
-      await Deno.writeTextFile(url,home)
+      await Deno.writeTextFile(url, home)
     }
   }
 }
@@ -286,28 +284,17 @@ async function About() {
 
   const [, md] = parseYaml(about)
   const content = await markdown(md)
-  const generated = `${head}${header}${
-    templateArticle({ title: '关于我', content })
-  }${footer}`
+  const generated = `${head}${header}${templateArticle({ title: '关于我', content })
+    }${footer}`
   await Deno.writeTextFile(__dist_about, generated)
 }
 
-async function Friends() {
-  const __dist_friends = new URL('./friends/index.html', dist)
-  if (!await exists(__dist_friends)) await ensureFile(__dist_friends)
-  const __src_friends = new URL('./friends/index.html', src)
-  let friends = await Deno.readTextFile(__src_friends)
-  friends = replaceBody(friends, header, footer, randomNumber)
-
-  await Deno.writeTextFile(__dist_friends, friends)
-}
-
 async function main() {
   if (existsSync(new URL(dist))) {
     Deno.removeSync(new URL(dist), { recursive: true })
   }
   await handlePosts()
-  Promise.all([Home(), Archive(), Tags(), Others(), About(), Friends()])
+  Promise.all([Home(), Archive(), Tags(), Others(), About()])
 }
 
 // Handle the http server

public/css/markdown.css

@@ -44,7 +44,7 @@ blockquote {
 
 pre {
   overflow: auto;
-  background-color: rgba(72, 69, 138);
+  /* background-color: rgba(72, 69, 138); */
   padding: 1.5rem 1.2rem;
   border-radius: 0.25rem;
   min-height: 2rem;
@@ -78,187 +78,6 @@ p>img:only-child {
   margin: 0 auto;
 }
 
-code.hl {
-  span.hl-comment {
-    color: rgb(179, 98, 255);
-  }
-}
-
-code.language-json {
-  span.hl-punctuation {
-    color: rgb(255, 215, 2);
-  }
-
-  span.hl-attr {
-    color: rgb(255, 215, 2);
-  }
-
-  span.hl-string {
-    color: rgb(146, 252, 121);
-  }
-
-  span.hl-literal {
-    color: rgb(255, 97, 140);
-  }
-}
-
-/* code fragment */
-code.language-ts,
-code.language-js,
-span.javascript {
-  span.hl-keyword {
-    color: rgb(255, 158, 0);
-  }
-
-  span.hl-attr,
-  span.hl-title,
-  span.hl-property {
-    color: rgb(254, 213, 5);
-  }
-
-  span.hl-params {
-    color: rgb(116, 180, 193);
-  }
-
-  span.hl-string,
-  span.hl-params span.hl-built_in {
-    color: rgb(128, 255, 187);
-  }
-
-  span.hl-variable {
-    color: rgb(157, 255, 255);
-  }
-
-  span.hl-number,
-  span.hl-boolean {
-    color: rgb(255, 97, 140);
-  }
-}
-
-code.language-html {
-
-  span.hl-tag,
-  span.hl-name {
-    color: rgb(157, 255, 255);
-  }
-
-  span.hl-attr {
-    color: rgb(254, 213, 5);
-  }
-
-  span.hl-string {
-    color: rgb(164, 255, 144);
-  }
-}
-
-code.language-css {
-  span.hl-selector-pseudo {
-    color: rgb(254, 213, 5);
-  }
-
-  span.hl-attribute {
-    color: rgb(166, 255, 139);
-  }
-
-  span.hl-string {
-    color: rgb(249, 230, 123);
-  }
-}
-
-code.language-sql {
-
-  span.hl-keyword,
-  span.hl-type {
-    color: rgb(249, 230, 123);
-  }
-
-  span.hl-number {
-    color: rgb(255, 97, 140);
-  }
-}
-
-code.language-yaml {
-  span.hl-attr {
-    color: rgb(255, 215, 2);
-  }
-
-  span.hl-string {
-    color: rgb(164, 255, 144);
-  }
-}
-
-code.language-rust {
-
-  span.hl-keyword,
-  span.hl-punctuation {
-    color: rgb(255, 158, 0);
-  }
-
-  span.hl-number {
-    color: rgb(255, 97, 140);
-  }
-
-  span.hl-built_in,
-  span.hl-title,
-  span.hl-type,
-  span.class_,
-  span.function_,
-  span.invoke__ {
-    color: rgb(255, 215, 2);
-  }
-
-  span.hl-string {
-    color: rgb(164, 255, 144);
-  }
-}
-
-code.language-go {
-
-  span.hl-keyword,
-  span.hl-literal,
-  span.hl-number {
-    color: rgb(255, 97, 140);
-  }
-
-  span.hl-title,
-  span.hl-params,
-  span.hl-built_in {
-    color: rgb(255, 215, 2);
-  }
-
-  span.hl-string {
-    color: rgb(164, 255, 144);
-  }
-
-  span.hl-keyword,
-  span.hl-type {
-    color: rgb(255, 158, 0);
-  }
-}
-
-code.language-c {
-
-  span.hl-meta span.hl-keyword,
-  span.hl-type {
-    color: rgb(255, 158, 0);
-  }
-
-  span.hl-string {
-    color: rgb(164, 255, 144);
-  }
-
-  span.hl-title,
-  span.hl-params,
-  span.hl-built_in {
-    color: rgb(255, 215, 2);
-  }
-
-  span.hl-literal,
-  span.hl-number {
-    color: rgb(255, 97, 140);
-  }
-}
-
 /* GitHub Alert */
 .markdown-alert {
   padding: 0.5rem 1rem;