Tistory MarkDown Editing Guide

markdown.css

markdown.js

# 티스토리에서 마크다운(Markdown) 사용 가이드 > 티스토리는 마크다운을 지원하지 않는다!! 그래서, **글쓰기** 에서 **HTML**을 선택해서 **textarea** 태그를 이용해서 마크다운 문서를 작성하면 마크다운 js/css 파일에서 다시 렌더링 해주는 형식으로 사용한다. ``` 이 방식은 몇가지 단점이 존재한다. 티스토리 자체에서 마크다운문법을 지원하지 않기때문이다. 좀 번거롭기는 하지만, 그나마 최대한 원래의 마크다운 소스를 유지하고 있기 때문에 해결책이 될 수 있을 것이다. 문서를 작성한 후 저장하게 되면 문서내의 HTML 문자들이 & lt ; 형태로 이스케이프된다! ``` ## 티스토리 마크다운 설정방법 이제 본격적으로 티스토리 블로그에 마크다운 형식의 문서를 적용하는 방법에 대해서 알아보도록 하겠다. **http://자신의아이디.tistory.com/manage** 경로로 블로그 **관리 폐이지**로 접속한다. 좌측에 블로그관련 메뉴중에서 하기의 그림과 같이 **꾸미기 / HTML/CSS편집** 메뉴를 선택한다.  새로운 창이 생성되고, 화면이 크게 두개로 분할되어 있게된다.(미리보기 / 설정) 먼저 본 가이드 상단의 2개의 파일을 다운로드 해두길 바란다. 이 두개의 파일을 티스토리 스킨폴더에 업로드 해 두고 사용하기 위함이다. > 본, 작업은 스킨을 바꿀때 마다 해주어야만 한다. !! 다운로드 했다면, 하기의 그림과 같이 **파일업로드** 메뉴를 선택한 후 하단의 **추가** 메뉴를 선택해서 상기의 2개 파일을 선택한 후 업로드 하면 다음과 같이 될 것이다. (아직, 창을 닫지 않는다)  이제는 하기 그림과 같이 **HTML** 메뉴를 클릭해서 업로드한 파일을 설정하도록 하겠다. 소스 상단 부분에 하기의 그림과 같이 **head** 태그 위에 다음의 코드를 입력한다. ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> ```  이제, **HTML** 부분의 가장 마지막으로 이동한 뒤에, 하기의 그림과 같이 2개 부분의 코드를 추가한다. (이미지와 실제 파일명이 차이가 있으므로 알맞게 바꾸기 바란다. 코드를 복사할 경우는 문제없다) ```html <link rel="stylesheet" href="./images/markdown.css "> <script src="../images/markdown.js"></script> ``` ```html <script> $('textarea[markdown]').each(function (i) { var text = $(this).val(); var html = marked(text, { gfm: true, tables: true, breaks: false, pedantic: false, sanitize: false, smartLists: true, smartypants: false }); $(this).before('<div class="markdown-body">' + html + '</div>'); }); </script> ```  이제 마지막으로, 상단의 **CSS** 메뉴를 클릭한 다음 맨 마지막에 다음과 같이 입력한다. ```css textarea[markdown] { display:none; } ```  이제 자유롭게 **글쓰기**를 눌러서 **반드시** *HTML* 모드에서 다음과 같이 입력해서 사용하기 바란다. ```html <textarea markdown=""> # Title 1 ## Sub Ttile # Title 2 </textarea> ``` 텍스트에리어 내부에 마크다운 문법으로 작성하면 된다. 또한, 이미지나 사진은 먼저 일반에디터에서 미리 업로드한 후, 해당 파일의 등록정보에서 URL을 미리 복사해서 마크다운 링크태그에 넣으면 된다. > Markdown Syntax Test # Heading_1 ## Heading_2 ### Heading_3 #### Heading_4 ##### Heading_5 ###### Heading_6 **Bold** *Italic* ~~Strike Out~~ **Bold __Itaclic__** > Quote Text `Quote Code ` ```java // Code Quote & Syntax Highlight import javafx.application.Application; public static void main(String[] args) { System.out.println("Hello, MarkDown"); } ``` [Link](http://www.xenostream.com) [Relative Link](MarkDown_Github.md) - List_1 - List_2 - List_3 1. Number List_1 1. Number List_2 1. Number List_3 1. Mixed List 1. Number List 1 1. Number List 2 * Sub List 1 * Sub List 2 1. Normal List 1. Sub List * sub list 1 * sub list 2 * sub list 3 * leaf list 1 * leaf list 2 - [x] Task list 1 - [] Task list 2 - [] Task list 3 Ignore Markdown is \\ non list \\ R/C | Header 1 | Header 2 :---|:---:|---: Row1 | Data 1 | **Data 2** Row2 | Data 3 | Data 4 Row3 | Data 5 | Data 6 Row4 | Data 7 | Data 8 *Row5* | Data 9 | Data 10 L | C | R