코드 블록

소스 코드, 설정 파일, 터미널 명령처럼 글자 모양과 공백을 그대로 보여야 하는 내용에 씁니다. 고정폭 글꼴의 회색 상자로 보입니다.

createEditor('#editor', {
  toolbar: 'heading | bold code | codeBlock | undo redo',
});

쓰는 법

• codeBlock 버튼 또는 Ctrl+Shift+C: 커서가 있는 문단(골랐으면 고른 문단들)을 코드 블록으로 바꿉니다. 문단마다 한 줄이 됩니다.
• 코드 블록 안에서 다시 누르면 줄마다 문단으로 돌아옵니다. 맨 앞에서 Backspace 를 눌러도 문단이 됩니다.
• 안에서 Enter 는 줄바꿈입니다. 마지막 빈 줄에서 Enter 를 한 번 더 누르면 블록 밖으로 나옵니다.
• Tab 은 공백 두 칸을 넣습니다.
• 빈 줄에서 / 를 치고 "코드 블록"을 골라도 됩니다.
• 코드 블록 안에서는 글자를 골라도 서식 말풍선 툴바가 뜨지 않습니다.

언어 고르기

코드 블록 안에 커서를 두면 아래에 막대가 뜹니다. 언어를 고르면 <code> 에 class="language-…" 가 붙습니다. 에디터가 색을 칠하지는 않습니다. 글을 보여 주는 페이지에서 Prism, highlight.js 같은 구문 강조 스크립트가 이 class를 보고 색을 입힙니다. 막대의 닫기 버튼은 코드 블록을 문단으로 되돌립니다.

문장 안의 코드

한 단어나 짧은 명령은 code 버튼(Ctrl+E)으로 문장 안에 넣습니다. markdownShortcuts 가 켜져 있으면 `코드` 처럼 백틱으로 감싸 쳐도 됩니다. 마크다운의 ``` 코드 울타리는 마크다운 붙여넣기로 들어옵니다.

저장되는 HTML

<pre><code class="language-js">const editor = createEditor('#editor', {
  toolbar: 'board',
});</code></pre>

editor.exec('codeBlock');         // 넣기 / 풀기
editor.exec('codeBlock', 'php');  // 언어를 정해 넣기
editor.exec('code');              // 문장 안 코드

프리셋

codeBlock 은 board 와 full 프리셋의 ⋯ 메뉴에 있습니다. code(문장 안 코드)는 full 에만 있습니다.

옵션