showdown.js를 사용하여 티스토리에 마크다운 적용하기
반응형
블로그에 마크다운을 쓸 때 자주 사용하는 방법은 에디터의 HTML모드를 활성화한 상태에서 마크다운 양식으로 본문을 쓴 다음, 스킨에 스크립트를 추가하여 마크다운 문서를 HTML 문서로 변환하는 방법을 사용합니다.
추가: 이제 티스토리는 마크다운도 잘 지원합니다
skin.html 수정
마크다운으로 작성한 본문을 HTML로 변환하기 위해 jQuery와 showdown.js를 사용합니다.
실제로 변환에 사용하는 스크립트는 showdown.js이고 jQuery는 스크립트 작성의 편리를 위해 임의로 추가한 것입니다. 이후에
진행할 개조까지 생각하면 jQuery의 기능을 활용할 일이 반드시 생길듯하니 첫 개조부터 jQuery를 활용해 스킨 내부 스크립트를 작성하려 합니다.
cdnjs에서 제공하는 jQuery CDN을 사용합니다.
스킨에 따라 이미 jQuery를 불러오는 경우가 있습니다. 이 때는 굳이 jQuery를 추가할 필요가 없습니다.
이제 스킨 편집의 html 수정을 눌러 <head> 태그 안에 다음 태그를 추가합니다.
<head>
...스킨 내용...
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>본문 내용을 변환하라는 명령을 <body> 태그의 하단에 추가합니다.
<script>
var text = $('markdown').text(),
converter = new showdown.Converter(),
html = converter.makeHtml(text);
$('markdown').html(html);
</script>
</s_t3>
</body>이 스크립트는 jQuery로 작성하였습니다. 본문에
작성할 <markdown> 태그 안의 내용을 마크다운에서 HTML로 변환하라는 의미입니다.
포스트 작성
새 글을 쓸 때 도구 리본의 우측에 있는 HTML체크박스에 체크가 되어있는지 확인하세요. 본문을
시작할 때 <markdown>로 시작하여 </markdown>로 끝냅니다.
반응형
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| jQuery: 티스토리 마크다운을 지원하는 목차 생성 스크립트 (0) | 2019.04.08 |
|---|---|
| 티스토리 스킨 만들기 (4) - CSS 개요 (0) | 2018.11.29 |
| 티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바 (0) | 2018.11.28 |
| 티스토리 스킨 만들기 (2) - HTML 개요 (0) | 2018.11.28 |
| 티스토리 스킨 만들기 (1) - 티스토리 스킨의 특징 (0) | 2018.11.27 |
댓글