문맥

this PWA를 생성하는 동안 Markdown 데이터를 MongoDB의 Atlas에 저장하고 싶었습니다.

예제 마크다운

# Some interesting title
Description about the topic...

- list #1
- list #2

> Maybe a quote ?

위의 마크다운은 데이터베이스에 단일 문자열로 저장됩니다.

{
  // other fields
  markdown: "# Some interesting title\nDescription about the topic...\n- list #1\n- list #2\n> Maybe a quote ?"
  // further fields
}

문제

Atlas 에서 데이터를 읽는 동안 줄 바꿈 이스케이프 문자, 즉 \n는 이미 이스케이프된 것으로 표시됩니다. 즉, \\n는 이중 '\'에 주목하세요.

따라서 HTML로 구문 분석하는 동안 줄 바꿈은 줄 바꿈 문자가 아니라 리터럴\n 문자로 읽힙니다.

렌더링된 HTML



Markdown 파서(marked.js)는 예상대로 렌더링하기 위해 각 블록(제목, 목록, 단락, 따옴표 등) 사이에 줄바꿈이 있어야 합니다. 그렇지 않으면 한 줄의 문자열로 렌더링됩니다.

위의 예에서는 모든 것을 제목 수준 1로 렌더링합니다.

왜요 ?

Markdown 파서는 # 토큰을 볼 때 그 뒤의 텍스트(줄 바꿈까지)가 H₁로 렌더링된다고 가정합니다. 따라서 목록, 단락, 따옴표를 포함한 모든 항목은 줄바꿈이 없기 때문에 <h1>로 렌더링됩니다.

해결책

문제가 Markdown 파서에 있다고 생각하고 대신 MongoDB에서 오는 데이터에 문제가 있다고 생각하여 실수했습니다.

이중 이스케이프 문자\\n가 범인이었습니다.

해결 방법으로 Markdown Parser 에 전달하기 전에 markdown 문자열에서 모든 \\n 를 \n 로 바꾸려고 했습니다.

import parser from "marked";

// 'markdownString' would be the markdown field read from mongodb
const replacedWithSingleEscape = markdownString.replace(/\\n/g, "\n");

parser(replacedWithSingleEscape);

해결! 수정 후 렌더링된 출력은 다음과 같습니다.