Add syntax highlighting

packages/website/mdsvex.config.js

@@ -16,6 +16,8 @@ import rehypeKatexSvelte from 'rehype-katex-svelte';
 
 import rehypeSlug from 'rehype-slug';
 
+import { createHighlighter } from "@bitmachina/highlighter";
+
 import { parse, format } from "node:path";
 
 import slugify from 'slugify';
@@ -63,6 +65,29 @@ function pageResolver(pageName) {
     const slug = slugify(pageName, { lower: true });
     return ["/", "/projects/"].map((p) => p + slug);
 }
+// import { grammars } from 'tm-grammars'
+// console.log()
+// let http = grammars.find((grammar) => grammar.name == "json")
+// console.log(http)
+import httpGrammar from 'tm-grammars/grammars/http.json' assert { type: "json" };
+// @ts-ignore
+// http.grammar = httpGrammar;
+// console.log(httpGrammar)
+const httpHighlight = {
+    id: 'http',
+    // aliases: ['http', "https"],
+    grammar: httpGrammar,
+    categories: ['web', 'utility'],
+    displayName: 'HTTP',
+    embedded: ['shellscript', 'json', 'xml', 'graphql'],
+    lastUpdate: '2023-07-24T09:58:17Z',
+    license: 'MIT',
+    licenseUrl: 'https://raw.githubusercontent.com/Huachao/vscode-restclient/master/LICENSE',
+    name: 'http',
+    scopeName: 'source.http',
+    sha: 'a89f8bce1b5e3d5bd955f10916b0c101e20431d3',
+    source: 'https://github.com/Huachao/vscode-restclient/blob/a89f8bce1b5e3d5bd955f10916b0c101e20431d3/syntaxes/http.tmLanguage.json',
+}
 
 const hrefTemplate = (/** @type {string} */ permalink) => `#${permalink}`
 /**
@@ -78,6 +103,8 @@ const config = {
     },
 
     highlight: {
+        // @ts-ignore
+        highlighter: await createHighlighter({ theme: "github-dark", langs: [httpHighlight] }),
         alias: {
             ts: "typescript",
             mdx: "markdown",

packages/website/package.json

@@ -9,6 +9,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
+    "@bitmachina/highlighter": "1.0.0-alpha.6",
     "@fontsource/fira-mono": "^5.0.13",
     "@json-feed-types/1_1": "^1.0.2",
     "@rollup/plugin-commonjs": "^25.0.8",
@@ -39,6 +40,7 @@
     "svelte-seo": "^1.6.1",
     "sveltekit-html-minifier": "^1.0.3",
     "svgo": "^3.3.2",
+    "tm-grammars": "^1.13.11",
     "tslib": "^2.6.3",
     "typescript": "^5.4.5",
     "unified": "^11.0.4",

packages/website/src/lib/styles.css

@@ -23,6 +23,9 @@
 
     --border-radius: 8px;
 
+    --code-colour-scheme: dark;
+    --code-background-color: #0d1117;
+    --code-color: #fff;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -128,9 +131,44 @@ svg {
 }
 
 .screen-reader-only:focus {
-	clip: auto;
-	width: auto;
-	height: auto;
-	white-space: normal;
-	overflow: visible;
+    clip: auto;
+    width: auto;
+    height: auto;
+    white-space: normal;
+    overflow: visible;
+}
+
+/* Code */
+pre {
+    color-scheme: var(--code-colour-scheme);
+    color: var(--code-color);
+    background-color: var(--code-background-color);
+    overflow-x: auto;
+    font-weight: 400;
+    font-size: .875em;
+    line-height: 1.7142857;
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+    border-radius: .375rem;
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--spacing)/2);
+    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a
+}
+
+code[data-line-numbers]>span[data-line-number]::before {
+    /* Insert the line number data attribute before the line */
+    content: attr(data-line-number);
+    /* Other styling */
+    display: inline-block;
+    width: 1rem;
+    margin-right: 1rem;
+    margin-left: 1rem;
+    text-align: right;
+    color: gray;
+}
+
+code>span[data-highlighted] {
+    background: #3b4252;
+    width: 100%;
 }

packages/website/src/routes/blog/[...date]/[slug]/+page.svelte

@@ -36,6 +36,7 @@
     <svelte:component this={component} releaseData={data.ghReleaseData} />
 {/await} -->
 
+    <!-- <div class="e-content"> -->
     <svelte:component this={data.component} />
 </article>
 

packages/website/src/routes/blog/[...date]/[slug]/+page.ts

@@ -8,7 +8,7 @@ export async function load({ data, params }) {
     //   throw error(404, 'Post not found')
     // }
     // load the markdown file based on slug
-    console.log(data)
+    // console.log(data)
     const component =
         // await import(data.page.filepath)
         await import("Notes/Blogs/" + data.page.filepath.name + ".md")