support asm

examples/web/components/CodeSnippet.tsx

@@ -26,7 +26,7 @@ const ALL_LANGS = [
   // "apl",
   // "applescript",
   // "ara",
-  // "asm",
+  "asm",
   // "astro",
   // "awk",
   // "ballerina",
@@ -584,6 +584,15 @@ function ThemePicker({
 }
 
 const defaultCode = {
+  asm: `
+; @dim
+section .data
+    message db 'Hello, World!', 0
+;   -------
+;     ^
+; [Hello World!]
+  
+`,
   c: `
 // @dim
 #include <stdio.h>

packages/remark-shaku-code-annotate/src/__tests__/langs/asm/input.txt

@@ -0,0 +1,8 @@
+```asm annotate
+; @dim
+section .data
+    message db 'Hello, World!', 0
+;   -------
+;     ^
+; [Hello World!!!]
+```

packages/remark-shaku-code-annotate/src/__tests__/langs/asm/output.txt

@@ -0,0 +1 @@
+<pre class="shiki github-light" style="color:#24292e;background-color:#fff"><div class="code-container"><code><div class="line dim"><span style="color: #6F42C1">section .data</span></div><div class="line"><span style="color: #24292E">    message </span><span style="color: #D73A49">db</span><span style="color: #24292E"> 'Hello, World!', </span><span style="color: #005CC5">0</span></div><div class="shaku-underline shaku-underline-solid" style="left:4ch"><span class="shaku-underline-line" style="left:0ch">-------</span></div><div class="shaku-callout" style="left:2ch"><span class="shaku-callout-arrow" style="left:4ch"></span><p>Hello World!!!</p></div></code></div></pre>

packages/remark-shaku-code-annotate/src/index.ts

@@ -49,7 +49,7 @@ export const remarkShakuCodeAnnotate = (
         // generate the html from the tokens
         let html = `<pre class="shiki ${theme.name}" style="color:${foregroundColor};background-color:${backgroundColor}">`;
         html += `<div class="code-container"><code>`;
-        const parsedLines = parseLines(lines);
+        const parsedLines = parseLines(lines, node.lang);
         const hasFocus = hasShakuDirectiveFocus(parsedLines);
         let shouldHighlighNextSourceLine = false;
         let shouldDimNextSourceLine = false;
@@ -261,7 +261,7 @@ function escapeHtml(html: string) {
 
 /**
  * different kinds of comments have different interpretations
- * Below are some common examples, these are not exaustive
+ * Below are some common examples, these are not exhaustive
  * I'm not sure if there are other cases for different languages
  *
  * "// aaa" => [{content: "// aaa", explanation: [{content: '//'}, {content: ' aaa'}]}]
@@ -281,7 +281,10 @@ function escapeHtml(html: string) {
  * 4. the first meaningful token has the comment body
  *   - find the first explanation that is not `punctuation.definition`.
  */
-function parseComment(line: IThemedToken[]): null | {
+function parseComment(
+  line: IThemedToken[],
+  lang?: null | string
+): null | {
   offset: number;
   body: string;
 } {
@@ -320,14 +323,18 @@ function parseComment(line: IThemedToken[]): null | {
       offset += explanation.content.length;
     }
   }
+  // for some languages, we are not able to extract body from above logic
+  // so we have to trim manually
+  const trimmedBody = trimCommentBody(body, lang);
+  console.log(trimmedBody);
   return {
-    offset,
-    body,
+    offset: offset + body.length - trimmedBody.length,
+    body: trimmedBody,
   };
 }
-function parseLines(lines: IThemedToken[][]) {
+function parseLines(lines: IThemedToken[][], lang?: string | null) {
   return lines.map((line) => {
-    const parsedComment = parseComment(line);
+    const parsedComment = parseComment(line, lang);
     if (parsedComment != null) {
       const { body, offset } = parsedComment;
       const shakuLine = parseLine(body);
@@ -381,6 +388,26 @@ function shouldBeTreatedAsWhitespace(token: IThemedToken) {
   return false;
 }
 
+const commentMarkers: Record<string, { head?: RegExp; tail?: RegExp }> = {
+  asm: {
+    head: /^\s*;/,
+  },
+};
+
+function trimCommentBody(body: string, lang?: string | null) {
+  let trimmedBody = body;
+  if (lang != null && lang in commentMarkers) {
+    const { head, tail } = commentMarkers[lang];
+    if (head != null) {
+      trimmedBody = trimmedBody.replace(head, "");
+    }
+    if (tail != null) {
+      trimmedBody = trimmedBody.replace(tail, "");
+    }
+  }
+  return trimmedBody;
+}
+
 function assertsNever(data: never) {
   throw new Error("expected never but got: " + data);
 }