마크다운

마크다운에 익숙한 사람은 # , - , **굵게** 처럼 치면 바로 서식이 됩니다. 마크다운 글을 붙여넣거나, 본문을 마크다운으로 꺼내고 넣을 수도 있습니다.

createEditor('#editor', {
  toolbar: 'heading | bold italic strike code | bulletList orderedList checklist | blockquote codeBlock | markdown',
  height: 320,
});

치면서 바뀌는 규칙

문단 맨 앞에서 아래 글자 다음에 스페이스를 치면 블록이 바뀝니다. 코드 블록과 가로선은 그 줄에서 Enter 를 칠 때 바뀝니다.

글자 안에서는 닫는 기호를 치는 순간 바뀝니다.

마크다운 붙여넣기

메모장, VS Code, 채팅 앱에서 복사한 글처럼 서식 없는 글이 마크다운처럼 보이면 서식으로 바꿔 붙입니다. 제목, 코드 펜스, 표, 목록 두 줄 이상, 링크, 굵게 같은 표시를 보고 판단합니다. 붙인 뒤에는 "마크다운을 서식으로 바꿔 붙였어요" 알림이 뜨고, 그 안의 글자 그대로 단추를 누르면 바꾸기 전 글자 그대로 다시 붙습니다.

• 코드 블록 안, Ctrl+Shift+V, pasteMode: 'plain' 일 때는 바꾸지 않습니다.
• 웹 페이지나 워드처럼 HTML 이 함께 오는 붙여넣기는 붙여넣기 정리를 따릅니다.
• paste 이벤트의 source 가 'markdown' 으로 옵니다.

마크다운 창 (markdown 툴바 항목)

markdown 단추는 본문을 마크다운으로 보여 주는 창을 엽니다. 복사 단추로 그대로 가져가거나, 고친 뒤 적용하면 본문이 그 내용으로 바뀝니다(실행 취소 가능). board 와 full 프리셋에서는 ⋯ 더 보기 메뉴 안에 있습니다.

코드로 꺼내고 넣기

// 본문을 마크다운으로
const md = editor.getMarkdown();

// 마크다운으로 본문 바꾸기 (실행 취소 가능)
editor.setMarkdown('# 공지\n\n**내일** 점검이 있습니다.');

// 에디터 없이 변환만
import { markdownToHtml, htmlToMarkdown } from '@82editor/core';
const html = markdownToHtml('- 하나\n- 둘');
const back = htmlToMarkdown(html);

제목, 목록(중첩과 체크 포함), 인용, 코드 펜스, 표, 가로선, 굵게·기울임·취소선·코드·링크·이미지를 다룹니다. 마크다운으로 쓸 수 없는 것(글자색, 강조 박스, 접은 글, 동영상, 사진 묶음, 첨부 파일, 칸 합친 표 등)은 마크다운 안에 HTML 로 남고, markdownToHtml 이 다시 읽습니다. 줄바꿈 하나는 <br> 이 됩니다.

옵션