티스토리 markdown 에 github style markdown 입히는 법

개발 관련 포스트는 markdown 으로 작성하기로 했다. 마크다운을 쓰면 형식이 모두 정해져 있기 때문 글쓰는것에만 집중할 수 있어서이다. 티스토리는 기본적으로 markdown 작성을 지원하나, 결과물이 예쁘지가 않다. 따라서 markdown 을 정말 markdown 스럽게 꾸며주기로 했다.

1. github style markdown css 를 적용

https://github.com/sindresorhus/github-markdown-css 레포지토리는 마크다운을 github의 스타일로 꾸며주는 css 를 제공한다.

https://cdnjs.com/libraries/github-markdown-css 여기서 제공하는 cdn tag를 하나 복사하여 html의 head 부분에 커스텀 적용한다(가장 최종 적용되도록 가장 밑에 작성). 필자는 github-markdown-light.min.css를 선택했는데, 다크모드까지 포함된 버전을 적용할 경우 스킨이 다크모드를 지원하지 않으면 글 부분만 까맣게 나와서 다크모드가 없는 버전을 선택했다.

2. 스킨 css 수정

스킨 커스텀 수정 -> css 맨 밑에

.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px 0;
}
@media (max-width: 767px) {
    .markdown-body {
        padding: 15px 0;
    }
}

를 작성해준다.

3. 글 작성 시 html 수정

글을 작성할 때 html 수정으로 들어가서 전체 내용을 <div class="markdown-body"></div>로 감싼다.
필자는 저 코드만 작성된 서식을 만들어 적용하고 있다.

필자의 마크다운 활용법

markdown 문법에 맞게 일일히 작성하는건 매우 귀찮은 일이기 때문에, notion 으로 내용을 작성한 다음 markdown 내보내기 하여 복붙한 다음, 3번을 적용해준다.

사실 티스토리가 좀 업데이트를 해주면 굳이 위와 같은 귀찮은 과정을 적용할 필요가 없지만, 카카오가 티스토리를 버려서 어쩔 수가 없다.