마크다운 에디터에 쓸 수 있는 구성이 늘었다

이 블로그는 글을 마크다운으로만 쓴다. 제목, 목록, 코드 블록 정도는 충분했는데 글이 길어지니 아쉬운 게 생겼다. 주의할 점을 눈에 띄게 따로 빼고 싶었고, 사진 아래에 설명을 달고 싶었다.

그래서 쓸 수 있는 구성을 늘렸다. 이 글은 바뀐 문법으로만 썼다.

같은 글이 두 가지로 저장되던 문제

문법을 늘리기 전에 먼저 고친 게 있다. 지금까지는 관리자 화면에서 쓴 글은 브라우저가, API 로 보낸 글은 서버가 HTML 로 바꿨다. 변환기가 둘이라 같은 원문도 어디로 올리느냐에 따라 결과가 달랐다.

기존 글을 새 변환기로 돌려 보다가 엉뚱한 버그도 하나 찾았다. "통상 5~8% 할인, 10만~16만 원"처럼 물결표 두 개가 한 문장에 있으면 그 사이 글자에 취소선이 그어지고 있었다. 물결표 하나짜리도 취소선으로 보는 규칙 때문이었다. 한국어 글에서는 범위를 ~ 로 자주 쓰니 이제는 ~~두 개~~ 일 때만 취소선이 된다.

콜아웃

인용문 첫 줄에 [!종류] 를 적으면 안내 상자가 된다. 종류는 다섯 가지다.

> [!WARNING]
> 운영 DB 에서 실행하지 않는다.

사진 캡션과 크기

사진만 있는 줄에 따옴표로 제목을 붙이면 사진 아래에 캡션이 나온다. 뒤에 {width=...} 를 붙이면 너비도 정할 수 있다.

![설명](사진.png "캡션"){width=520}

형광펜, 체크박스, 각주

문장 속에서 꼭 기억할 부분만 칠하고 싶을 때는 등호 두 개로 감싼다. 할 일 목록은 체크박스로 쓴다.

• 서버 변환기 하나로 합치기
• 콜아웃, 캡션, 형광펜, 각주 추가
• 예전 글 다시 저장하기

각주는 본문에 [^1] 처럼 번호만 적고 내용은 아무 곳에나 따로 쓴다. 그러면 글 맨 아래에 모인다.^[1]

접어 두기

길지만 모두가 읽을 필요는 없는 내용은 접어 둔다.

이번에 바꾼 파일 보기

• 서버 변환기: markdown_service.py
• 허용 태그 정리: sanitize_service.py
• 미리보기: POST /api/v1/posts/preview

<summary> 다음 줄과 </details> 앞에 빈 줄을 두어야 안쪽도 마크다운으로 바뀐다.

표와 유튜브

구성	쓰는 법
콜아웃	> [!NOTE]
형광펜	==강조==
캡션	
각주	[^1]

유튜브는 영상 주소 하나만 한 줄에 적으면 플레이어로 바뀐다. 문장 속에 섞인 주소는 그냥 링크로 남는다.

https://www.youtube.com/watch?v=영상ID

---

1. 각주는 이렇게 글 맨 아래에 모인다. 오른쪽 화살표를 누르면 본문의 원래 자리로 돌아간다. ↩︎