@markdown
# 티스토리 마크다운 적용
## 들어가기 전에
현재는 티스토리 새로운 에디터에서 Markdown 이 공식으로 지원된다.
앞으로 작성하는 글에는 새로운 에디터를 이용하여 Markdown 형식으로 글을 관리할 것이다.
_
**이 게시물은 이전 에디터를 대상으로 하며 필요한 분들만 참고하도록 하자.**
_
_
## 티스토리 마크다운 적용
티스토리에 마크다운 적용하는법을 한참 찾아보아도 적당한 방법이 나오질 않다가 아래 글들을 찾았다.
_
[Tistory Markdown으로 글쓰기](http://makerj.tistory.com/299)
[Highlight.js를 이용한 구문강조(Syntax Highlight)](http://editorizer.tistory.com/190)
_
첫번째는 내가 원하던 '마크다운 만으로' 글을 쓰는 방법이다.
글쓴이의 말을 인용하자면
_
>*"티스토리에서 마크다운을 쓰는 방법이 어떤지 검색해 보니, 정작 내가 찾는 내용은 없고 별도의 에디터에서 마크다운으로 글을 작성하고 티스토리에 붙여넣기 하라는 괴랄한 방법이나 알려주는 글이 대부분이었다."*
_
공감한다. 대부분의 글들이 현재까지도 마크다운 작성, HTML 변환, HTML 코드 붙여넣기 형태로 소개하고 있다. 즉, 마크다운으로 티스토리에 글쓰는 것이 아니라, 단순 코드붙여넣기 작업일 뿐만아니라 복잡한 과정을 거친다.
_
그래서 진짜 Markdown 만으로 글을 쓰도록 도와주는 도구를 소개한다.
_
두번째는 `<code>` 작성시에 Highlight 기능을 해주는 라이브러리이다.
이역시 많은 도구들이 나왔지만 그중 적용이 가장 간편하고 다양한 테마를 제공해주는 Highlight.js 를 소개한다.
_
- - -
_
## **Tistory Markdown으로 글쓰기**
_
티스토리에 마크다운을 적용하기위해 먼저 스크립트를 삽입하도록 하자
_
### 설정
_
메뉴에서 `HTML/CSS 편집` 을 클릭한다.
_
_
이후 뜨는 창에서
`HTML` 을 선택후 하단 `</body>` 위에 코드를 아래와 같이 삽입한다.
_
_
``` html
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.0/showdown.min.js"></script>
<script src="https://rawgithub.com/makerj/misc/master/tistory-markdown-plugin.js"></script>
```
_
>여기서 `</body>` 위에 삽입하는 이유는 [자바스크립트 성능 이야기: NHN은 이렇게 한다!](http://wikibook.co.kr/naver-javascript-performance/) 를 읽어 보면된다.
_
### 글 작성
_
글쓰기를 눌러 마크다운으로 글을 작성해보자.
HTML 을 해제하고
본문에 `@markdown` 을 삽입하면 끝난다.
이후 그림처럼 마크다운 그대로 작성하면 된다.
_
_
- - -
_
## **Highlight.js를 이용한 구문강조(Syntax Highlight)**
_
마크다운 적용이 완료되었으면 `<code>` 태그에 구문강조(Syntax Highlight)를 적용해보자.
_
### 설정
_
위와 마찬가지로 `HTML/CSS 편집` 창으로 들어가서
아래 코드를 삽입한다.
_
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
```
_
그리고 이번엔 상단 `</head>` 바로위에 다음 코드를 삽입한다.
_
```html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/androidstudio.min.css">
```
_
> **TIP:** 여기서 androidstudio 부분은 본인의 테마에 따라서 달라진다.
[여기로 들어가서 ](https://highlightjs.org/static/demo/) 마음에 드는 테마를 고른후 androidstudio 부분을 해당 테마이름으로 바꾸자.
_
### 사용
마지막으로 마크다운을 이용해 `<code>` 의 언어를 변경해보도록 하자
Markdown 에서 code 를 삽입하기 위해 ` ``` ` 를 사용하는데 첫번째 ` ``` ` 뒤에 해당 언어를 넣으면 된다.
예를들어 다음과 같이 작성하면 된다.
_
```
```javascript
var temp = function() {
console.log()
}
```
```
_
## **단점**
_
1. 웹브라우저 호환성 문제가 있는 듯하다. 익스플로러, 모바일 웹브라우저, 엣지에서 접속해본결과 마크다운이 깨지는 현상이 발생했다.
2. 글목록을 볼때 여러글을 보려고 하면 다른 글 내용과 뭉쳐지는 현상이 발생한다. 이 마크다운 변환 스크립트를 사용하기 위해서는 한개의 글만 띄워야 한다.
3. 검색 포털이나 구글에는 마크다운 원문 형태로 노출된다 (ex, `# 티스토리 마크다운 적용` 처럼 마크다운 문법 `#` 이 그대로 나타남)
이러한 단점은 해당 깃헙에 이슈로 남기거나 풀리퀘스트를 보내주면 좋을 것 같다.
_
## **마치며**
_
훨씬 간편한 방법으로 Markdown 과 Syntax Highlighting 을 적용해보았다.
전적으로 이방법이 옳지는 않다. 가장 최선은 티스토리에서 마크다운 작성이 가능하도록 제공해주는 것이지만 현재까지 그런 기능은 없다.
앞으로도 '괴랄한' 방법이 아닌, 이러한 좋은 도구를 개발해주는 개발자가 많이 늘었으면 좋겠다.
_
- [https://highlightjs.org](https://highlightjs.org)
- [https://github.com/makerj/misc](https://github.com/makerj/misc)
_
'기타' 카테고리의 다른 글
| [책, 독후감] 객체지향과 디자인 패턴 (0) | 2017.08.05 |
|---|