Tistory 블로그에 github-markdown-css 적용하기

적용하게 된 계기

Tistory 플랫폼을 이용하면서 markdown 문법을 이용하여 포스팅을 합니다. 하지만 뭔가 필자에겐 tistory 블로그에서 기존에 제공해주는 css가 부자연스럽고 가독성을 해친다는 생각이 들었습니다. 그리하여 수정을 해야겠다는 생각을 하였습니다.

직접 css 파일을 수정할 수 있지만 더 쉽고 간단하게 편하게 적용할 수 있는 방법이 뭐가 있을까 생각을 하였더니 github-markdown-css 프로젝트를 알게 되었습니다. github를 이용하는 필자에게도 매우 친숙한 css 스타일이기에 최종적으로 github-markdown-css 양식을 tistory 블로그에 적용하기로 마음을 먹었습니다.

github-markdown-css

GitHub 사이트 접속

github-markdown-css 에 접속합니다.

CDNJS 접속

npm install github-markdown-css 를 작성하여 node의 node package manager를 활용하여 이 github-markdown-css 를 활용할 수 있고 CDNJS를 이용하여 link를 걸 수도 있습니다.

필자는 기존에 있던 html 양식에 link를 걸어 불러올 것이기 때문에 CDNJS를 활용할 것입니다. 그러므로 CDNJS를 클릭합니다.

CDNJS 선택

https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css

github-markdown-light.min.css 가 포함되어 있는 cdnjs를 선택합니다. 필자는 light 테마를 사용할 예정이어서 light 테마를 선택했지만 dark 테마 사용을 원하신다면 github-markdown-dark.min.css 를 사용하시면 됩니다.

Tistory의 HTML에 적용할 예정입니다.

.markdown-body

Import the github-markdown.css file and add a markdown-body class to the container of your rendered Markdown and set a width for it. GitHub uses 980px width and 45px padding, and 15px padding for mobile.

cdnjs 링크를 적용한다고 github-markdown-css를 사용할 수 있는 것이 아닙니다. markdown-body 클래스 또한 적용해야지만 사용할 수 있습니다.

.markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 45px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }

위의 코드를 tistory 블로그 css에 삽입을 할 예정입니다.

Tistory 블로그에 적용

꾸미기 -> 스킨 편집

Tistory 블로그를 예시로 설명합니다.

사용자의 티스토리 블로그의 관리에서 꾸미기의 스킨 편집을 클릭합니다.

html 편집

html 편집을 클릭합니다.

CDNJS 삽입

https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown-light.min.css

위와 같은 코드를 HTML에 삽입합니다.

markdown-body 삽입

.markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 0px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }

CSS에 markdown-body 클래스를 삽입합니다. 필자는 공간을 전부 활용하기를 원하기 때문에 padding: 45px가 아닌 0px으로 수정하여 적용하였습니다.

markdown-body 적용

마크다운에서 글 작성 후 완성 X

기존처럼 마크다운에서 작성한 글을 그대로 완성하는 것이 아닌

마크다운 -> HTML

<div class="markdown-body">
  . 
  .
  .
  .
  .
  .
</div>

HTML 로 이동하여 첫 번째 줄에 <div class="markdown-body"> 그리고 마지막 줄에 </div> 를 작성합니다.

결과

before

after

기존 티스토리 스킨인 #1에서 제공했던 css와 비교를 해 보니 다음과 같이 github-markdown-css가 적용되어 전보다 가독성이 좋아진 것을 확인 할 수 있습니다.