diff --git a/src/components/markdown/Markdown.module.scss b/src/components/markdown/Markdown.module.scss index 314fc817..fc625508 100644 --- a/src/components/markdown/Markdown.module.scss +++ b/src/components/markdown/Markdown.module.scss @@ -52,6 +52,17 @@ margin: 0; } + h1, + h2, + h3, + h4, + h5, + h6 { + &:not(:first-child) { + margin-top: 12px; + } + } + ul, ol { list-style-position: inside; diff --git a/src/components/markdown/Renderer.tsx b/src/components/markdown/Renderer.tsx index ede8dd7d..770622ec 100644 --- a/src/components/markdown/Renderer.tsx +++ b/src/components/markdown/Renderer.tsx @@ -81,10 +81,40 @@ declare global { } } +// Include emojis. md.renderer.rules.emoji = function (token, idx) { return generateEmoji(token[idx].content); }; +// Force line breaks. +// https://github.com/markdown-it/markdown-it/issues/211#issuecomment-508380611 +const defaultParagraphRenderer = + md.renderer.rules.paragraph_open || + ((tokens, idx, options, env, self) => + self.renderToken(tokens, idx, options)); + +md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) { + let result = ""; + if (idx > 1) { + const inline = tokens[idx - 2]; + const paragraph = tokens[idx]; + if ( + inline.type === "inline" && + inline.map && + inline.map[1] && + paragraph.map && + paragraph.map[0] + ) { + const diff = paragraph.map[0] - inline.map[1]; + if (diff > 0) { + result = "
".repeat(diff); + } + } + } + + return result + defaultParagraphRenderer(tokens, idx, options, env, self); +}; + const RE_TWEMOJI = /:(\w+):/g; // ! FIXME: Move to library