Marked.js에서 개행문자를 인식 못하는 문제 발생

[Seok-Hun]

Marked.js로 개행문자를 포함한 문자열 표시

• 개행문자를 포함한 문자열을 Marked.js로 표시할 시 개행문자를 하나만 작성할 경우 개행이 적용되지 않는 문제 발생
• # 같은 제목 마크다운 사용 시 개행문자를 하나만 사용해도 개행 적용됨

Board.json

[
  {
    "id": 1,
    "markdown": "# Hello world ## 이건 게시판 테스트용 Mock 데이터입니다. ### 게시판에서 마크다운이 얼마나 잘 보이는지 테스트합니다. \n **이건 굵은 글씨입니다.** <br> *이건 아마도 기울기 체크일듯* \n - 리스트 체크 \n - 리스트 체크 2"
  },
]

Board.jsx

function Board() {
  const markdown = BoardMock[0].markdown
  ...
          <div dangerouslySetInnerHTML={{ __html: marked.parse(markdown) }} className='prose'></div>
  ...
}

[Seok-Hun]

처리

결론적으로 개행문자를 두번 사용하면 개행이 적용되는 것 확인

• 예시

  [
  {
   "id":1,
   "markdown":" **이건 굵은 글씨입니다.**\n\n개행 문자 적용"
  }
  ]

  추후 처리 사항

  서버 혹은 클라이언트에서 사용자가 작성한 게시글 문자열을 파싱해 개행 부분에 개행 문자를 추가로 작성하여 저장하도록 함

• 에런 의견으로는 서버에서 처리하도록 하는 것이 좋아보임

[Seok-Hun]

원인

참고자료

• 마크다운에서는 하나 이상의 연속적인 텍스트 줄로 구성된 단락을 하나 이상의 빈 줄로 구분
• 빈 줄 : 아무 내용 없는 줄. 즉, 공백이나 탭만 포함된 줄
• 따라서 마크다운에서 <br/> 태그를 삽입해 단락 구분을 원한다면 둘 이상의 공백을 추가한 후 개행문자를 넣으면 된다.