본문 바로가기

자료

티스토리에서 Markdown Here 쓰는 요령

추가 - 티스토리 신규 에디터

티스토리 개편 후의 신규 에디터에는 마크다운 기능이 자체적으로 들어있습니다. 그래서 이 글의 내용도 다수 맞지 않게 됩니다.

항목 티스토리 자체 마크다운 Markdown Here
h1 ~ h6 스킨을 따라감 자체 스타일이 가미됨 (underline 등)
코드 강조 일부 소수 언어만 지원 Markdown Here가 지원하는 언어를 지원 (폭이 더 넓음)
원본 마크다운 데이터 서버측 저장 및 처리 (추정) 본문에 데이터로 포함됨
fn main() {
    println!("such rust");
}

이하 내용은 원본 글 내용입니다.


예전 글에서 저는 마크다운 히어 부가기능을 소개한 바 있습니다. 이메일 전송란 등 형식을 지정할 수 있는 고급 편집기라면 인터넷 어디서든 사용할 수 있죠.

티스토리도 예외는 아닙니다. 제 최근 블로그 게시글들은 이 부가기능으로 썼죠. 그러면서 여러 요령이 생겼는데요, 이걸 공유해볼까 합니다.

아, 이 글에서는 마크다운의 기본적인 사용법은 다루지 않습니다.

기본 - 글 쓰기

글의 수정은 가급적이면 마크다운 보기에서 합니다. 최종 결과로 변환한 후의 문서를 수정하면 나중에 다시 마크다운으로 되돌렸을 때 수정한 부분을 잃어버리게 됩니다.

먼저, 문단 간격 없음 에 체크하세요. 변환 전 마크다운 보기 상태로 글 쓰기를 진행할 때 문단 나눔과 강제 개행의 구분은 방해가 됩니다. (*신규 에디터에는 없습니다. Shift + Enter로 강제 줄바꿈을 삽입하시기 바랍니다.)

다음으로, 글 쓰기를 다 한 뒤에 꼭 잊지 말고 마크다운으로 변환하세요. 종종 까먹고 그대로 올렸다가 급하게 수정을 눌러 마크다운 문서를 최종 형태로 변환하고는 하게 되더라구요.

이미지

이미지는 변환 전 마크다운 상태에서 티스토리 기능을 통해 업로드합니다. 마크다운 토글을 눌러도 이 방식으로 업로드하면 크기 변환까지 유지됩니다.

안타깝게도 가운데 정렬은 직접 HTML을 작성해야 합니다. 아래와 같이 사용하면 됩니다. (절대로 HTML 보기를 체크하지 마세요.)

<div style="text-align:center;">여기에 이미지를 넣으세요</div>

물론 클립보드의 이미지를 붙여넣기 해도 되는데 그렇게 넣은 건 마크다운을 떠나서 파일보관함에 안 나오는 거 다들 아시죠?

유튜브 동영상


퍼가기 기능으로 소스 째로 넣습니다. 물론 원본 마크다운 문서 보기에서요.

티스토리 에디터의 외부컨텐츠 입력 기능은 동작하지 않는 것으로 보이니 주의바랍니다.

주석

주석도 변환 이전 원본 마크다운 문서에서 그냥 쓰면 됩니다[각주:1]. 변환 전과 변환 후에 그대로 유지됩니다.

더 보기

가장 곤란한 부분이 더 보기 / 접기 입니다. 이게 그냥 넣으면 그대로 유지가 안 돼요. 물론 삽입하는 요령은 있습니다.

티스토리 에디터의 문법을 사용하면 됩니다. HTML보기를 체크하면 찾을 수 있는데요, 이렇게 나오는 걸

이렇게 일부 문자(언더바, 샾)를 \ 기호로 이스케이프 해서 쓰면 됩니다. 일부 문법이 마크다운이랑 겹치거든요. 이스케이프 안 하면 난장판이 됩니다!

마크다운 변환 후에도 저렇게 텍스트로 남아있지만, 최종 저장을 수행하거나 미리보기를 누르면 제대로 더 보기 버튼으로 나옵니다.

더 보기 - 신규 에디터

더 쉽네요. 직접 마크다운 문서에 HTML을 넣으면 되겠습니다.

<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기">
<a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p>내용</p>
</div>

더보기

내용


그 외 안 되는 요소

몇몇 에디터 요소는 삽입후 변환시 유지가 안 되어서 직접 HTML로 입력해야 합니다. 바로 위의 더 보기 때와 같은 방법을 사용하시면 되겠습니다.


그 외의 기능들은 살펴보지 않았습니다. 인용은 마크다운 문법에 있어서 시도조차 안 해봤구요.

  1. 이렇게요. [본문으로]