티스토리에 Github 마크다운 적용하기

티스토리에서 제공하는 마크다운 기능이 있지만 사용하기 불편하여 github에서 제공하는 마크다운을 연동하기로 하였다.

준비물 : github-markdown.css

• https://github.com/sindresorhus/github-markdown-css
  여기서 github-markdown.css를 다운한다.
  나의 경우 github-markdown.css의 테마 적용이 지금 티스토리 스킨과 맞지 않아 github-markdown-light.css를 다운받아 적용하게 되었다.

css 파일 업로드

티스토리 설정 페이지 -> 꾸미기 -> 스킨편집 -> html 편집 -> 파일업로드 -> 제일 하단의 추가 버튼을 통해 github-markdown-light.css 업로드

 

티스토리 css 수정

css 탭에서 아래 값 추가.

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

HTML 코드에 css 참조 부분 추가

포스팅

• 마크다운을 사용하여 포스팅 작성
• 티스토리에는 포스트 타입을 html로 설정하여 markdown-dody로 묶은 후 업로드

<div class="markdown-body">
  //작성한 마크다운 텍스트
</div>