티스토리 markdown 스킨 적용하기

주의

이 포스트 내용은 현재 이 블로그에 사용되는 스킨에 적용되지 않습니다.
오히려 깨지는 상황이 일어나고 스킨마다 적용 적합성이 다릅니다. 주의하시기 바랍니다.

 

 

 

소개

티스토리에 깃허브의 MarkDown 양식처럼 스킨을 입혀서 포스팅을 할 수 있습니다.

이 MarkDown 스킨은 아래와 같은 특징이 있습니다.

• 현재 적용중인 스킨에 영향을 받지 않습니다.
• 단, 1개의 css link를 연결하고, css 일부만 수정하면 됩니다.
• MarkDown 형식의 포스터를 필요시에 선택적으로 적용할 수 있습니다.

 

사용법

잘 하시는 분들은 아래의 링크로 이동하여 readme를 보고 적용하실 수 있습니다.

https://github.com/sindresorhus/github-markdown-css

sindresorhus/github-markdown-css

 

1. CSS Link 복사

아래의 링크를 티스토리 스킨편집으로 들어가서 CSS를 붙여 넣습니다.

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

 

 

2. CSS 적용

아래의 css를 티스토리 링크편집의 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. MarkDown으로 포스팅을 시작합니다.

글을 모두 작성했다면, 글 편집 모드를 마크다운에서 HTML로 이동합니다.

그리고 아래의 코드로 포스트 글 전체를 감싸줍니다.

<div class="markdown-body"> 작성한 글 </div>

 

 

4. 미리보기를 클릭합니다.

글이 제대로 잘 적용이 되었는지 확인해야겠죠?

확인 후 포스팅하세요.

 

 

 

참고

스킨 데모 링크

스킨을 보고 싶다면 아래 링크로 이동해 주세요.

https://sindresorhus.com/github-markdown-css/

GitHub Markdown CSS demo