feat: add `inline-code` syntax parser

web/src/labs/marked/marked.test.ts

@@ -82,6 +82,18 @@ console.log("hello world!")
       },
     ];
 
+    for (const t of tests) {
+      expect(marked(t.markdown)).toBe(t.want);
+    }
+  });
+  test("parse inline code", () => {
+    const tests = [
+      {
+        markdown: `Code: \`console.log("Hello world!")\``,
+        want: `<p>Code: <code>console.log("Hello world!")</code></p>`,
+      },
+    ];
+
     for (const t of tests) {
       expect(marked(t.markdown)).toBe(t.want);
     }

web/src/labs/marked/parser/InlineCode.ts

+export const INLINE_CODE_REG = /`([\S ]+?)`/;
+
+const match = (rawStr: string): number => {
+  const matchResult = rawStr.match(INLINE_CODE_REG);
+  if (!matchResult) {
+    return 0;
+  }
+
+  const matchStr = matchResult[0];
+  return matchStr.length;
+};
+
+const renderer = (rawStr: string): string => {
+  const parsedStr = rawStr.replace(INLINE_CODE_REG, "<code>$1</code>");
+  return parsedStr;
+};
+
+export default {
+  name: "inline code",
+  regex: INLINE_CODE_REG,
+  match,
+  renderer,
+};

web/src/labs/marked/parser/index.ts

@@ -11,6 +11,7 @@ import Mark from "./Mark";
 import Bold from "./Bold";
 import Emphasis from "./Emphasis";
 import PlainLink from "./PlainLink";
+import InlineCode from "./InlineCode";
 
 export { CODE_BLOCK_REG } from "./CodeBlock";
 export { TODO_LIST_REG } from "./TodoList";
@@ -27,5 +28,5 @@ export { EMPHASIS_REG } from "./Emphasis";
 
 // The order determines the order of execution.
 export const blockElementParserList = [CodeBlock, TodoList, DoneList, OrderedList, UnorderedList, Paragraph];
-export const inlineElementParserList = [Image, Mark, Link, Bold, Emphasis, PlainLink, Tag];
+export const inlineElementParserList = [Image, Mark, Link, Bold, Emphasis, InlineCode, PlainLink, Tag];
 export const parserList = [...blockElementParserList, ...inlineElementParserList];

web/src/less/memo-content.less

@@ -48,7 +48,11 @@
     }
 
     pre {
-      @apply w-full mt-1 py-2 px-3 rounded text-sm bg-gray-100 whitespace-pre-wrap;
+      @apply w-full my-1 py-2 px-3 rounded text-sm bg-gray-100 whitespace-pre-wrap;
+    }
+
+    code {
+      @apply bg-gray-100 px-1 rounded text-sm leading-6 inline-block;
     }
   }