티스토리에 마크다운 적용하는 법

가독성 높은 글을 만들어 보려고, 제목 부제를 이쁘게 넣는 법을 찾아보다가

나에게는 마크다운이 더 적절할 것이라 생각했다.

하지만, 티스토리에서 제공하는 마크다운에 한계가 있어서 포기하려던 찰라.

적용 방법이 있어 글로 남긴다.

 

사용법 불편하다.

하지만 도전해볼만 할 것 같아 정리한다.

난 내일이면 또 까먹을것이 분명하기 때문이다.

 

https://cdnjs.com/libraries/github-markdown-css

github-markdown-css - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

위 링크에 들어가서 원하는 타입을 선택한다.

 

 

먼저 스킨편집에서 두개의 설정을 추가 해야 한다.

 

1. HTML에 추가

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown-light.css" integrity="sha512-twSIkcOWTg8pO2szOkSwXeumnI79JQ0zVRavBB5cdJvhVFhReF9fBlyFM380P6vKIQ4mlD80EPtuZdSPpqYDgQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 

 

2. CSS에 추가

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

 

 

3. 글을 마크다운으로 작성후, Html로 변경하고, div를 추가

- 매번 글쓸때마다 해줘야 한다는게 단점...

<div class="markdown-body">

~~~~~~~~~~~~~~~~
내가 작성한 마크다운을 html로 변경한 부분
~~~~~~~~~~~~~~~~

</div>

 

내가 해본 결과 완벽한 마크다운은 처리가 되지 않는다..