@markdown

![소개](https://t1.daumcdn.net/cfile/tistory/21667049595D0D7529)


# 티스토리 마크다운 적용


## 들어가기 전에

현재는 티스토리 새로운 에디터에서 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 편집` 을 클릭한다.

_

![적용/티스토리 메뉴](https://t1.daumcdn.net/cfile/tistory/25408842595CEBBF19)

_

이후 뜨는 창에서

`HTML` 을 선택후 하단 `</body>` 위에 코드를 아래와 같이 삽입한다.

_

![적용/HTML 수정](https://t1.daumcdn.net/cfile/tistory/2225384F595CEE6616)

_

``` 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` 을 삽입하면 끝난다.

이후 그림처럼 마크다운 그대로 작성하면 된다.

_

![적용/글쓰기](https://t1.daumcdn.net/cfile/tistory/277B5C4A595CF1A707)

_

- - -

_

## **Highlight.js를 이용한 구문강조(Syntax Highlight)**

_

마크다운 적용이 완료되었으면 `<code>` 태그에 구문강조(Syntax Highlight)를 적용해보자.

_

### 설정

_

위와 마찬가지로 `HTML/CSS 편집` 창으로 들어가서

아래 코드를 삽입한다.

![적용/하이라이터 삽입](https://t1.daumcdn.net/cfile/tistory/214E0040595CF2F83B)

_

```html

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script> 

```

_

그리고 이번엔 상단 `</head>` 바로위에 다음 코드를 삽입한다.

![적용/CSS 삽입](https://t1.daumcdn.net/cfile/tistory/255BF638595CF38418)

_

```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

+ Recent posts