깃허브 스타일 마크다운 적용하기

깃허브 ccs 마크다운 적용하기

깃허브 스타일의 마크다운 방식을 티스토리에 적용한다.
특히나 코드 입력 부분에서 티스토리 기본 양식은 너무 구리기때문에..

1. css파일 추가

스킨 편집 -> HTML 편집 -> HTML 들어가서 아래 코드를 한 줄 추가한다.
Contents Delivery Network에서 js파일을 받아와 알아서 적용한다.

<!-- github-markdown-css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.css" rel="stylesheet">

2. 마크다운 클래스 추가(선택사항)

위의 1번 과정만 해주어도 정상 작동하지만, 패딩을 바꾼다던지 손보고 싶은 부분이 있다면 markdown-body 클래스를 직접 수정할 수 있다.
스킨 편집 -> HTML 편집 -> CSS 부분에서 아래와 같이 입력한다.

깃허브는 max-width 980px, 45px padding을 쓰고 모바일은 15px 패딩을 쓴다.
공간을 모두 활용하려면 45px padding을 0px로 주어도 된다.

<style>
    .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;
        }
    }
</style>

3. 글 작성 시 깃허브스타일 마크다운 적용하기

마크다운 양식으로 글 작성을 끝낸 후, HTML양식으로 바꾼 후 맨 첫줄에 직접 태그를 써주어야한다.
첫줄과 마지막줄에 각각 아래와 같이 markdown-body 클래스로 감싸주면 된다.

<div class="markdown-body">
    <p>콘텐츠</p>
</div>