JSerZANP · JSerZANP · Dec 4, 2023 · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023
diff --git a/README.md b/README.md
@@ -8,11 +8,12 @@ out of my frustration while writing articles for my personal blog - [jser.dev](h
 ## Tools
 
 1. [shaku-code-annotate-core](./packages/shaku-code-annotate-core/) - core parser of Shaku. Tokenizer not included.
-2. [shaku-code-annotate-shiki](./packages/shaku-code-annotate-shiki/) - Shaku syntax highlighter based on shiki/
-3. [remark-shaku-code-annotate](./packages/remark-shaku-code-annotate/) - plugin for remark.
-4. [marked-shaku-code-annotate](./packages/marked-shaku-code-annotate/) - plugin for marked.
-5. [Shaku Playground](https://shaku-web.vercel.app/) - a playground to try out shaku-code-annotate.
-6. [Shaku Snippet](https://shaku-web.vercel.app/snippet) - generate beautiful code snippet screenshots with annotation.
+2. [shaku-code-annotate-shiki](./packages/shaku-code-annotate-shiki/) - Shaku syntax highlighter based on Shiki.
+3. [shaku-code-annotate-sugar-high](./packages/shaku-code-annotate-sugar-high/) - Shaku syntax highlighter based on Sugar High.
+4. [remark-shaku-code-annotate](./packages/remark-shaku-code-annotate/) - plugin for remark.
+5. [marked-shaku-code-annotate](./packages/marked-shaku-code-annotate/) - plugin for marked.
+6. [Shaku Playground](https://shaku-web.vercel.app/) - a playground to try out shaku-code-annotate.
+7. [Shaku Snippet](https://shaku-web.vercel.app/snippet) - generate beautiful code snippet screenshots with annotation.
 
 ## Dev Tools
 

diff --git a/examples/web/app/page.tsx b/examples/web/app/page.tsx
@@ -24,6 +24,7 @@ export default async function Page({
         >
           <a href="/playground">Shaku Playground</a>
           <a href="/snippet">Shaku Snippet</a>
+          <a href="/sugar-high">Shaku &times; Sugar High</a>
         </$.nav>
         <$.h1 $textAlign="center">Shaku - code annotation made easy</$.h1>
         <p>
@@ -70,6 +71,13 @@ export default async function Page({
             <a href="https://github.com/shikijs/shiki">shiki</a>. You can use
             this package directly in node.js or browser.
           </$.li>
+          <$.li $margin="8px 0">
+            <a href="https://github.com/JSerZANP/shaku/tree/main/packages/shaku-code-annotate-sugar-high">
+              shaku-code-annotate-sugar-high
+            </a>{" "}
+            - Enable Shaku on the lightweight syntax highlighter -{" "}
+            <a href="https://github.com/huozhi/sugar-high">Sugar High</a>.
+          </$.li>
           <$.li $margin="8px 0">
             <a href="https://github.com/JSerZANP/shaku/tree/main/packages/remark-shaku-code-annotate">
               remark-shaku-code-annotate

diff --git a/examples/web/app/sugar-high/page.tsx b/examples/web/app/sugar-high/page.tsx
@@ -0,0 +1,22 @@
+import Head from "next/head";
+import { SugarHigh } from "../../components/SugarHigh/SugarHigh";
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const codeFromParams = searchParams?.code;
+  const langFromParams = searchParams?.lang;
+  const code = typeof codeFromParams === "string" ? codeFromParams : null;
+  const lang = typeof langFromParams === "string" ? langFromParams : null;
+
+  return (
+    <>
+      <Head>
+        <title>Shaku x Sugar High</title>
+      </Head>
+      <SugarHigh code={code} lang={lang} />
+    </>
+  );
+}
diff --git a/examples/web/components/CodeBlock.tsx b/examples/web/components/CodeBlock.tsx
@@ -33,13 +33,11 @@ export async function CodeBlock({
       (highlighter) =>
         highlighter.codeToShakuHtml({
           code,
-          meta: shakuEnabled ? "annotate" : "",
-          // by default Shaku falls back to shiki if meta doesn't contain "annotate"
-          // you can turn this off by following option
-          // fallbackToShiki: false
-          parseBasicMarkdown: (code) =>
-            unifiedProcessor.processSync(code).toString(),
           options: {
+            isShakuSyntaxEnabled: shakuEnabled,
+            useDangerousRawHtml: true,
+            markdownToHtmlAndSanitize: (code) =>
+              unifiedProcessor.processSync(code).toString(),
             lang,
           },
         }).html

diff --git a/examples/web/components/ShikiTokenInspector/ShikiTokenPreview.tsx b/examples/web/components/ShikiTokenInspector/ShikiTokenPreview.tsx
@@ -85,7 +85,7 @@ function Line({
 }) {
   return (
     <>
-      <span className="line">
+      <span className={styles.line}>
         {line.map((token) => (
           <span
             style={{ color: token.color }}
@@ -218,15 +218,3 @@ export default function ShikiTokenPreview({
     </Column>
   );
 }
-
-function Dot({ color }: { color: string }) {
-  return (
-    <$.span
-      $backgroundColor={color}
-      $width="12px"
-      $height="12px"
-      $display="inline-block"
-      $borderRadius="15px"
-    ></$.span>
-  );
-}
diff --git a/examples/web/components/ShikiTokenInspector/ShikiTokenVisualizer.module.css b/examples/web/components/ShikiTokenInspector/ShikiTokenVisualizer.module.css
@@ -16,3 +16,7 @@
   background-color: rgba(255, 255, 0, 0.334);
   cursor: pointer;
 }
+
+.line {
+  line-height: 1.5;
+}
diff --git a/examples/web/components/SugarHigh/SugarHigh.tsx b/examples/web/components/SugarHigh/SugarHigh.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { Editor } from "@monaco-editor/react";
+import { $ } from "migacss";
+import { useState } from "react";
+import { BsStars } from "react-icons/bs";
+import { defaultCode } from "remark-shaku-code-annotate";
+import { Column, Row, Text, View } from "../bare";
+import SugarHighPreview from "./SugarHighPreview";
+
+export function SugarHigh({
+  code: _code,
+  lang: _lang,
+}: {
+  code?: string;
+  lang?: string;
+}) {
+  const lang = "javascript";
+  const [code, setCode] = useState(_code ?? defaultCode[lang] ?? "");
+
+  const share = () => {
+    const query =
+      "code=" + encodeURIComponent(code) + "&lang=" + encodeURIComponent(lang);
+    const url = location.origin + "/snippet?" + query;
+    const type = "text/plain";
+    const blob = new Blob([url], { type });
+    const data = [new ClipboardItem({ [type]: blob })];
+    navigator.clipboard.write(data).then(
+      () => alert("link copied"),
+      () => alert("failed to copy link.")
+    );
+  };
+  return (
+    <Column $height={"100vh"} $padding={12} $gap={12}>
+      <View>
+        <Row $alignItems="center" $justifyContent="space-between" $gap={20}>
+          <Text type="headline1">Shaku Snippet &times; Sugar High</Text>
+          <$.a href="/" $textDecoration="none">
+            <Text type="headline5" $color="#0e67e4">
+              <BsStars />
+              Shaku Playground →
+            </Text>
+          </$.a>
+        </Row>
+        <Text type="body">
+          <a href="https://github.com/huozhi/sugar-high">Sugar High</a> is a
+          super lightweight syntax highlighter for JS/JSX, Shaku could be
+          enabled through{" "}
+          <a href="https://github.com/JSerZANP/shaku/tree/main/packages/shaku-code-annotate-sugar-high">
+            shaku-code-annotate-sugar-high
+          </a>
+          . created by <a href="https://twitter.com/JSer_ZANP">JSer</a>.
+        </Text>
+      </View>
+
+      <Row $gap={20} $flex="1 0 0 ">
+        <Column $flex="1 0 0" $maxWidth={600}>
+          <Editor
+            language={lang}
+            height="100%"
+            value={code}
+            theme="vs-dark"
+            onChange={setCode}
+            options={{
+              minimap: {
+                enabled: false,
+              },
+              lineNumbers: "off",
+            }}
+          />
+        </Column>
+        <SugarHighPreview code={code} lang={lang} />
+      </Row>
+    </Column>
+  );
+}
diff --git a/examples/web/components/SugarHigh/SugarHighPreview.tsx b/examples/web/components/SugarHigh/SugarHighPreview.tsx
@@ -0,0 +1,33 @@
+import { $ } from "migacss";
+import { useRef } from "react";
+import { highlight } from "shaku-code-annotate-sugar-high";
+import { View } from "../bare";
+
+export default function SugarHighPreview({
+  lang,
+  code,
+}: {
+  lang?: string | null;
+  code: string;
+}) {
+  const preview = highlight(code);
+  const refPreview = useRef<HTMLDivElement>(null);
+
+  return (
+    <View $flex="1 0 0">
+      <View
+        $minWidth={400}
+        $width="max-content"
+        // @ts-ignore
+        ref={refPreview}
+      >
+        <$.div
+          $whiteSpace="pre-wrap"
+          $fontFamily="var(--font-code)"
+          $fontSize={"14px"}
+          dangerouslySetInnerHTML={{ __html: preview }}
+        ></$.div>
+      </View>
+    </View>
+  );
+}
diff --git a/examples/web/css/global.css b/examples/web/css/global.css
@@ -1,5 +1,6 @@
 @import url("./reset.css");
 @import url("./shaku.css");
+@import url("./sugar-high.css");
 
 :root {
   --color-text-main: #333;

diff --git a/examples/web/css/shaku-sugar-high.css b/examples/web/css/shaku-sugar-high.css
@@ -0,0 +1,154 @@
+pre.shaku {
+  padding: 1rem;
+  border: 1px solid var(--color-line-3rd);
+  overflow-x: auto;
+}
+
+pre.shaku .sh__line {
+  min-height: 1em;
+  line-height: 1.5;
+}
+
+pre.shaku .sh__line.highlight {
+  background-color: var(
+    --color-shaku-highlight-light,
+    color-mix(in srgb, rgb(5, 118, 149) 15%, #fff)
+  );
+  display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+  pre.shaku .sh__line.highlight {
+    background-color: var(--color-shaku-highlight-dark, #2b4a70);
+  }
+}
+
+pre.shaku .sh__line.dim {
+  opacity: 0.3;
+}
+
+.shaku-callout {
+  background-color: var(--color-shaku-callout-light, #0685ce);
+  color: #fff;
+  padding: 0.5em 1ch;
+  position: relative;
+  margin: 0.5em 0 0 -0.2ch;
+  display: inline-block;
+  border-radius: 2px;
+}
+
+pre.shaku.github-dark .shaku-callout {
+  background-color: var(--color-shaku-callout-dark, #0685ce);
+}
+
+.shaku-callout p {
+  margin: 0;
+}
+
+.shaku-callout p a {
+  color: #fff;
+}
+
+.shaku-callout-arrow {
+  width: 1ch;
+  height: 1ch;
+  display: inline-block;
+  background-color: var(--color-shaku-callout-light, #0685ce);
+  position: absolute;
+  top: -0.5ch;
+  transform: rotate(45deg);
+  margin-left: 0.2ch;
+}
+pre.shaku.github-dark .shaku-callout-arrow {
+  background-color: var(--color-shaku-callout-dark, #0685ce);
+}
+
+.shaku-underline {
+  padding: 0 1ch;
+  position: relative;
+  display: block;
+  border-radius: 3px;
+  color: var(--color-shaku-underline-light, red);
+  margin: 0;
+  width: min-content;
+}
+pre.shaku.github-dark .shaku-underline {
+  color: var(--color-shaku-underline-dark, red);
+}
+
+.shaku-underline p {
+  margin: 0;
+}
+
+.shaku-underline a {
+  color: var(--color-shaku-underline-light, red);
+}
+pre.shaku.github-dark .shaku-underline a {
+  color: var(--color-shaku-underline-dark, red);
+}
+
+.shaku-underline-line {
+  line-height: 0;
+  top: 0.5em;
+  position: absolute;
+  text-decoration-line: overline;
+  text-decoration-color: var(--color-shaku-underline-light, red);
+  color: transparent;
+  pointer-events: none;
+  user-select: none;
+  text-decoration-thickness: 2px;
+}
+
+pre.shaku.github-dark .shaku-underline-line {
+  text-decoration-color: var(--color-shaku-underline-dark, red);
+}
+
+.shaku-underline-wavy > .shaku-underline-line {
+  text-decoration-style: wavy;
+  top: 0.7em;
+}
+
+.shaku-underline-solid > .shaku-underline-line {
+  text-decoration-style: solid;
+}
+
+.shaku-underline-dotted > .shaku-underline-line {
+  text-decoration-style: dotted;
+}
+
+.shaku-inline-highlight {
+  background-color: #05a4fa30;
+  border-bottom: 2px solid rgb(9, 113, 239);
+  margin: 0 1px;
+  border-radius: 3px;
+  padding: 0 3px;
+}
+
+.shaku-inline-highlight[data-id="1"] {
+  background-color: #05a4fa30;
+  border-bottom: 2px solid rgb(9, 113, 239);
+}
+
+.shaku-inline-highlight[data-id="2"] {
+  background-color: #fa05f230;
+  border-bottom: 2px solid rgb(235, 4, 158);
+}
+
+.shaku-inline-highlight[data-id="3"] {
+  background-color: #05faa930;
+  border-bottom: 2px solid green;
+}
+
+pre.shaku.github-dark {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  pre.shaku.github-dark {
+    display: block;
+  }
+
+  pre.shaku.github-light {
+    display: none;
+  }
+}