[티스토리 블로그] 깃허브 마크다운(GitHub Markdown) 스타일 적용하는 방법

[티스토리 블로그] 깃허브 마크다운(GitHub Mardown) 스타일 적용하는 방법

서론

평소에 깃허브 페이지 에 공부한 내용을 정리하는 습관을 갖고 있었다. 최근에 티스토리 블로그가 대폭 개편되면서 마크다운(Markdown)으로 글을 쓸 수 있게 되었는데, 깃허브 페이지의 스타일과 너무 맞지 않아 이질적인 느낌이 들었다. 또 글을 쓴 대로 잘 표현되지 않았다.

 

그래서 구글링을 통해 티스토리 블로그에 깃허브 마크다운(GitHub Markdown) 스타일을 적용시키는 방법을 알게되었다. 앞으로 마크다운 형식으로 블로그에 글을 올리려고 한다.

 

스타일 적용 방법

① github-markdown.css 소스 코드 복사 : Link

② 티스토리 블로그 설정 -> [스킨 편집] -> [html 편집]

 

[CSS] 탭

①에서 복사한 github-markdown.css 소스 코드를 [CSS] 본문 맨 밑에 붙여놓기.

 

[HTML] 탭

• 다음을 검색 ([Ctrl] + [F])하여 이동

##_article_rep_desc_##

• 다음과 같이 코드 변경

<div class="markdown-body">    <!-- 기존의 "article"에서 "markdown-body"로 변경 -->
    
</div>

• [적용] 버튼 클릭

 

테이블(표) 스타일 충돌 시 해결 방법

[CSS] 탭

기존의 티스토리 블로그 테이블 스타일과 깃허브 마크다운 스타일이 충돌하여 테이블이 깨져서 나올 수 있다.

이럴 때는 다음과 같이 깃허브 마크다운 스타일에 있는 테이블 스타일을 주석 처리해준다.

 

/*  주석 처리
.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
}

.markdown-body table th {
  font-weight: 600;
}

.markdown-body table td,
.markdown-body table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}
*/

 

---

 

• 참고 : click