diff --git a/web/src/labs/marked/marked.test.ts b/web/src/labs/marked/marked.test.ts index a15499b6..b7ebcc36 100644 --- a/web/src/labs/marked/marked.test.ts +++ b/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: `

Code: console.log("Hello world!")

`, + }, + ]; + for (const t of tests) { expect(marked(t.markdown)).toBe(t.want); } diff --git a/web/src/labs/marked/parser/InlineCode.ts b/web/src/labs/marked/parser/InlineCode.ts new file mode 100644 index 00000000..2593c8ce --- /dev/null +++ b/web/src/labs/marked/parser/InlineCode.ts @@ -0,0 +1,23 @@ +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, "$1"); + return parsedStr; +}; + +export default { + name: "inline code", + regex: INLINE_CODE_REG, + match, + renderer, +}; diff --git a/web/src/labs/marked/parser/index.ts b/web/src/labs/marked/parser/index.ts index 639eeb59..27a9ef1b 100644 --- a/web/src/labs/marked/parser/index.ts +++ b/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]; diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less index e98fd9bc..810318d3 100644 --- a/web/src/less/memo-content.less +++ b/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; } }