콜아웃·수식·다이어그램 쓰기

콜아웃은 색과 아이콘이 붙은 인용, 수식은 TeX 기호로 적은 수학식, 다이어그램은 Mermaid 문법으로 적은 순서도 같은 그림입니다. 셋 다 문서에는 마크다운 글자로만 들어 있습니다. 편집·보기 모드가 그 글자를 그림으로 바꿔 보여 주고, 원문 모드는 입력한 기호를 그대로 보여 줍니다.

콜아웃 쓰기

인용의 첫 줄을 [!종류]로 시작하면 콜아웃이 됩니다.

> [!tip] 알아 둘 것
> 본문 첫 줄
> 본문 둘째 줄

• ] 뒤에 한 칸 띄우고 쓴 글이 제목입니다. [!tip]알아 둘 것처럼 붙여 쓰면 콜아웃이 아니라 보통 인용으로 보입니다
• 제목을 비우면 종류 이름의 첫 글자만 대문자로 바꿔 제목 자리에 씁니다. [!warning]은 Warning, [!NOTE]는 NOTE로 보입니다
• >와 [ 사이는 붙여도 됩니다(>[!tip])
• 둘째 줄부터가 본문이고, 머리 줄 한 줄만 있어도 콜아웃입니다
• [!tip]-·[!tip]+처럼 붙은 -·+는 알아보지만, 접히지 않고 늘 펼친 채 보입니다

콜아웃 종류

종류 이름은 대소문자를 가리지 않습니다. 아래 한 줄에 있는 이름끼리는 같은 색이고, 아이콘은 이름마다 다를 수 있습니다. 이름 앞의 그림이 그 종류의 아이콘입니다.

• [!note] · [!info] · [!todo]
• [!abstract] · [!summary] · [!tldr] · [!tip] · [!hint] · [!important]
• [!success] · [!check] · [!done]
• [!question] · [!help] · [!faq]
• [!warning] · [!caution] · [!attention]
• [!failure] · [!fail] · [!missing] · [!danger] · [!error] · [!bug]
• [!example]
• [!quote] · [!cite]

목록에 없는 이름도 콜아웃이 되고, note와 같은 색과 아이콘으로 보입니다. [!할일]처럼 한글 이름을 지어 써도 됩니다.

콜아웃 넣기와 편집 모드

편집기에서 오른쪽 버튼을 눌러 삽입 ▸ 콜아웃을 고르거나, 상단바 탭바의 삽입 탭에서 콜아웃을 누릅니다. 아무것도 고르지 않았으면 > [!note] 머리 줄과 빈 본문 줄 하나가 들어갑니다. 글자를 고른 채 누르면 고른 부분이 걸친 줄마다 앞에 > 를 붙이고 맨 위에 > [!note] 줄을 더합니다. 다른 종류가 필요하면 note를 고쳐 씁니다.

편집 모드에서는 콜아웃의 모든 줄에 색이 입혀지고, 커서가 없는 줄의 >는 숨습니다. 머리 줄에 커서가 없으면 [!종류] 자리에 아이콘이 보이고, 머리 줄로 커서를 옮기면 [!종류]가 색 글자로 드러나 고칠 수 있습니다.

인용 안에 다시 콜아웃을 넣으면(> > [!tip]) 보기 모드는 안쪽도 콜아웃으로 그립니다. 편집 모드에서 콜아웃 모양이 되는 것은 가장 바깥 인용뿐입니다.

수식 쓰기

수식은 두 가지로 씁니다. 글줄 안에 넣을 때는 $로 감싸고, 한 줄을 통째로 차지하게 할 때는 $$만 적은 줄 두 개로 위아래를 막습니다.

원의 넓이는 $\pi r^2$ 입니다.

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

수식은 KaTeX(웹 화면에 TeX 수식을 그리는 공개 라이브러리)로 그리므로 KaTeX가 지원하는 명령만 쓸 수 있습니다.

$…$가 수식이 되는 조건은 이렇습니다.

• 여는 $ 바로 뒤와 닫는 $ 바로 앞에 공백이 없어야 합니다
• 닫는 $ 바로 뒤에 숫자가 오면 닫는 기호로 보지 않습니다. 그래서 $5와 $10 같은 글은 그대로 남습니다
• 짝은 한 줄 안에서만 찾습니다
• $를 글자로 쓰려면 \$로 적습니다
• 인라인 코드·코드블록·문서 맨 위 속성 안의 $는 글자 그대로입니다

$$ 수식은 앞뒤를 빈 줄로 떼어 한 문단으로 둡니다. 바로 위나 아래 줄에 글이 붙어 있으면 수식이 되지 않습니다. $$x^2$$처럼 한 줄에 써도 됩니다. 문서 맨 바깥에 있을 때만 이렇게 그리고, 목록·인용·콜아웃 안에서는 따로 세운 수식으로 그리지 않습니다.

수식 넣기와 편집 모드

• 오른쪽 버튼 메뉴 서식 ▸ 수식, 또는 탭바 서식 탭의 수식은 고른 글자를 $로 감쌉니다. $로 감싼 글자를 고르고 다시 누르면 벗깁니다. 아무것도 고르지 않았으면 $$를 넣고 커서를 그 사이에 둡니다
• 삽입 ▸ 수식 블럭, 또는 탭바 삽입 탭의 수식 블럭은 $$ 두 줄과 가운데 빈 줄을 넣고 커서를 가운데 줄에 둡니다. 글자를 고른 채 누르면 고른 부분이 걸친 줄들을 $$ 사이에 넣습니다

편집 모드에서 커서나 고른 범위가 수식에 닿으면 그 수식만 원문으로 돌아오고, 벗어나면 다시 그려집니다. 그려진 수식을 누르면 커서가 수식 맨 앞으로 가며 원문이 열립니다.

표 칸 안의 $…$는 편집 모드에서는 원문 글자로, 보기 모드에서는 수식으로 보입니다.

수식을 그리지 못하면 문장 속 수식은 원문 글자 그대로 흐린 색으로 남습니다. $$ 수식은 그 자리에 KaTeX가 낸 오류 문구가 뜹니다(예: 없는 명령을 쓰면 KaTeX parse error: Undefined control sequence로 시작하는 영어 문구).

다이어그램 쓰기

코드블록 여는 줄의 언어 자리에 mermaid를 적으면(대소문자 무관) 그 코드블록이 다이어그램이 됩니다. 여는 줄은 백틱 세 개 대신 물결표 세 개(~~~)로 써도 같습니다.

~~~mermaid
graph TD
  A[초안] --> B[검토]
  B --> C[발행]
~~~

• 다이어그램 종류와 문법은 Mermaid 문법을 따릅니다
• 다이어그램 전용 메뉴 항목은 없습니다. 삽입 ▸ 코드 블럭으로 빈 코드블록을 넣고 여는 줄 끝에 mermaid를 적습니다
• 편집 모드에서 커서가 코드블록 밖에 있으면 그림이, 안에 있으면 원문이 보입니다. 그림을 누르면 원문이 열립니다
• 목록·인용 안의 코드블록도 다이어그램이 됩니다
• 설정 화면 탭 테마가 다크이면 어두운 색으로, 화이트·세피아이면 밝은 색으로 그립니다. 시스템이면 그때 적용된 쪽을 따르고, 테마를 바꾸면 바로 다시 그립니다
• 그리지 못하면 그림 자리에 Mermaid가 낸 오류 문구가 뜹니다. 그 자리를 눌러 원문을 고칩니다

내보내기와 공유 화면

• HTML 파일은 수식 글꼴을 파일 안에 넣으므로 인터넷 연결 없이 열어도 수식이 그려집니다
• 서식 있는 복사는 콜아웃 아이콘을 빼고 복사합니다
• 읽기 전용 링크로 연 화면은 보기 모드와 같게 그리고, 다이어그램 색은 그 화면의 테마를 따릅니다
• 한 번 연 브라우저에서는 연결이 끊겨도 수식과 다이어그램을 그립니다. 그리는 데 쓰는 프로그램과 수식 글꼴을 앱과 함께 받아 두기 때문입니다

.md에는 입력한 글자가 그대로 나가므로, 이 문법을 어떻게 보여 줄지는 받는 쪽 도구에 달렸습니다. 옵시디언 볼트로 오갈 때도 콜아웃·수식·다이어그램 글자는 바뀌지 않습니다(옵시디언 볼트와 오가기). 다른 도구로 옮기는 이야기는 한 번 쓴 글을 다른 도구로 옮기기에 있습니다.

정리

• 콜아웃은 인용 첫 줄의 [!종류]로 만들고, 모르는 이름은 note 모양이 됩니다
• 수식은 $…$와 $$ 줄 사이에 적고, $ 바로 안쪽에 공백이 있거나 닫는 $ 뒤에 숫자가 오면 수식이 되지 않습니다
• $$ 수식은 빈 줄로 떼어 문서 맨 바깥에 둡니다
• 다이어그램은 언어 자리가 mermaid인 코드블록입니다
• 편집 모드에서 커서가 닿거나 그림을 누르면 원문이 드러납니다
• .md로는 입력한 글자 그대로, HTML 파일로는 그린 모습 그대로 나갑니다