티스토리 블로그에 마크다운으로 코드 올리기

Intro

티스토리에서 글을 쓸 때 마크다운 모드를 지원하지만, 꽤나 부족한 점이 많아보인다.

개인적으로는 마크다운에 능통한 편도 아니기 때문에, 라이브로 preview 까지 됐으면 좋겠지만, 그 중 가장 큰 분제는 바로 코드 올리기이다.

우연히 어떤 블로그에서 마크다운으로 코드를 올릴 수 있도록 js를 짜신 걸 보았는데, 좋은 아이디어인 듯 했으나, 적용이 안 되길래 내가 그냥 만들었다. 맨날

<pre>
<code class="language-python">
a=10
b=20
</code>
</pre>

이런 식으로 올리기가 이제는 너무 귀찮았고, 개발자라면 귀찮음을 없애기 위해 더 귀찮은 일을 하는 것이 보통이기 때문에....
이번에 만든 코드로 앞으로는 귀찮음이 적어질 것 같다.

사용방법

현재는 Prism.js 라는 Code Highlighting 기능이 있는 라이브러리와 함께 사용 중이다.

1. Prism.js 에서 라이브러리를 다운 받은 뒤 티스토리 스킨 편집으로 가서 업로드를 Prism.css와 Prism.js를 업로드해준다.

2. head에 <link href="./images/prism.css" rel="stylesheet" />을 추가해준다.
body에 아래 소스를 삽입해준다. 아마 밑 쪽이 나은 듯?

<script defer src="./images/markdown_code_highlighter.js" onload="highlight()"></script>
<script src="./images/prism.js"></script>

3.Tistory 글쓰기에서 Markdown 모드로 글을 쓴 뒤 `와 ```{{language}}를 이용해 code를 올린다.

이슈, 피드백, Github repository

Github Repository

혹시라도 안되면 위의 Github repository로 Issue 남겨주세요.

markdown_code_highlighter.js

아래의 코드를 저장하고 업로드해주세요. ( 같은 이름으로 업로드 해야함 )

function highlight() {  
    //console.log('version 1')  
    if (typeof $ != "function") {  
        console.log("markdown\_code\_highlighter needs jQuery")  
    } else {  
      $("pre").each(function(i, e) {
        $("code", e).each(function(i, e) {
            if ($(this).attr("class") == undefined) {
                $(this).attr("class", "language-python")
            }
        })
    })
    }


    $("code").each(function(i, e) {
        parentTagName = $(e).parent()[0].nodeName
            //if parentTagName is not "PRE", it means it's a single line code
        if (parentTagName != "PRE") {
            $(e).css({
                "background-color": "#d1d1d1",
                "padding-left": "5px",
                "padding-right": "5px",
                "border-radius": "8px",
                "color": "black"

            })
        }
    })
}