티스토리에 적용 안되는 깃허브 마크다운 스타일 적용하기

티스토리 스킨에 깃허브 마크다운 스타일 적용기

마음에 드는 티스토리 스킨을 찾았다. 심플한 디자인이 정말 매력적이다. 미디엄이나 브런치에 비해 전혀 부족함이 없는 스킨이다. 난 정말 심플한게 좋다.

좋다 여기까진. 하지만 문제가 하나 생겼다.

바로

티스토리 스킨에서 깃허브 마크다운 스타일이 적용되지 않는다.

아래를 보자

왼쪽은 티스토리 스타일, 오른쪽은 깃허브 스타일

위와 같이 스타일이 적용 안된다는 것은 상당히 거슬린다. 우리는 이미 깃허브 마크다운 스타일에 적응하고 유용하게 쓰고 있지 않은가? 그런데 이제와서 다시 티스토리 스타일에 적응하는 것은 여간 귀찮은게 아니다.

그런데 티스토리 스타일에 적응했다치자, 난 블로그에 쓴 글들을 마크다운 파일로 가지고 있어 깃으로 관리를 할 생각이었다. 그런데 티스토리 스타일로 문서를 작성하면? 개판이겠지. 안그래도 티스토리 마크다운 미지원에 분노하고 있던 찰라에 이것마저 용납 할 수 없었다.

그래서 방법을 찾아봤다. 해답은 간단했다. github-markdwon.css을 해당 스킨 css파일에 추가만 해주면 되는 식이다.

위 코드를 복사한 후

저 위치에 붙여넣기 하면 된다.

하지만, 적용이 안된다.

이유가 무엇인지 모르고 찾아보니 스킨마다 깃허브 마크다운 스타일이 적용이 되는게 있고 안되는게 있다고 한다.
기껏 마음에 드는 스킨을 찾았는데 안된다고? 실제로 다른 스킨들로 바꿔보며 테스트해보니 아주 지멋대로 스타일이 적용된다.

절이 싫으면 중이 떠난다고 하지만, 이제 막 초대장을 받아 기쁘게 개설했는데 떠날 수 없었다.

생각을 해봤다. HTML과 CSS로 구성된 웹페이지인데 CSS가 적용되지 않는 경우는 무엇일까? 이 문제는 흔히 우리 같은 개발자들이 겪는 문제이다. 경험으로 미루어보아

1. css 적용 위치가 잘못됐다.

충분히 그럴 수 있지만, 기존 css 최하단에 깃허브 스타일을 적용했다. 스킨 제작자가 inline style로 스타일을 때려 박지 안았다면 적용이 되야한다.

2. DOM의 class나 id를 못 찾는다.

이 경우가 아마 가장 많은 이유일 것이다.

그래서 확인해봤다.

<div class="area_view"> 이 dom 안에 우리의 글들이 렌더링 되는거 같다. 해당 dom에 스타일링을 확인해보니

문제의 <h1 ~ h4>가 같은 스타일링이 된 걸 볼 수 있다.

문제를 알면 해결법은 간단하다. 저 dom의 class 명을 우리가 원하는 식으로 바꿔주면 된다.

우리가 적용할 깃헙 스타일이 적용되는 dom의 class명은 markdown-body이다.
즉 <div class="area_view">를 <div class="markdown-body">로 바꿔주면 알아서 적용 될 것이다.

다시 스킨 편집으로 들어가 이번엔 html에서 area_view를 검색한다.

문제는 이 area_view class 명을 가진 dom이 여러개가 나온다는 것이다.

마음 같아서는 모두 변경해버리고 싶지만, 그러면 스킨 전체가 무너질거 같아 어쩔 수 없이 우리가 원하는 dom을 하나씩 찾을 수 밖에 없었다.

line 233 요놈이다.

요놈만 <div class="markdown-body"> 으로 변경해주면 된다. 그렇게하면

이렇게 github markdown style이 적용되는 것을 볼 수 있다.

하지만 우려와 같이 스킨이 깨지는 부분이 발생한다.

개발자모드로 살펴보니 저 글 목록 영역이 table로 만들어져 있어 깃허브 마크다운 스타일에 table 스타일링과 겹쳐 저런 문제가 발생하는 것이다.

여러가지 시도를 해봤지만, 아직 방법이 안떠올라 임시적으로 깃허브 마크다운 스타일의 table 스타일링 부분을 주석처리 함으로써 임시로 문제를 해결했다.

.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
}

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

.markdown-body table th,
.markdown-body table td {
  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;
}

이 부분을 주석처리 해주자

시간을 들여 코드들을 뜯어보면 해결방법이 나오겠지만, 막상 지금은 떠오르지 않는다. 우선 테이블 마크다운은 안쓰는걸로

이제 highlightjs 를 적용해보자
highlightjs는 마크다운으로 작성했을때 소스코드 영역에 코드를 분석, 자동으로 스타일링 해주는 소스이다.

적용 방법은 스킨 HTML 파일의 <header></header>사이 최하단에

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/원하는-테마-컬러.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

이것만 넣어주면 된다. 테마의 종류는 highlightjs demo에서 확인하고, 이름은 highightjs-style 여기서 가져오면된다.
예를 들어 atom one dark테마를 적용하고 싶으면

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css">

이렇게 넣어주면 된다.

자 그리고 실행을 하면?

언제나 버그는 있는법

이 버그 역시 마찬가지로 깃허브 마크다운 css 코드와 highlightjs의 css 코드가 충돌되는 문제이다.
마찬가지로 개발자모드로 dom을 찾아서 충돌되는 부분을 수정하면된다.

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #282c34; /* 컬러값을 내가 적용할 highlightjs의 background-color를 주면 된다 */
  border-radius: 3px;
}

자 그리고 저 정리하기에서 난 분명히 숫자리스트를 적용했다. 하지만 github-markdwon.css의 코드에는 숫자리스트를 주는 부분이 누락됐는지 적용이 안되있었다. 그리고 개인적으로 <p> 태그 안에 있는 <code> 부분을 강조하고 싶었다. 그래서 이 코드를 추가 했다.

<code> 스타일 부분은 velopert님의 블로그에서 코드를 따왔습니다.

.markdown-body p code {
  display: inline-block;
  padding: 0 5px 0 5px;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 1px;
  border: 1px #f8dae2 solid;
}

.markdown-body ol li {
  list-style: decimal;
}

그렇게하면 짜잔 지금 보시고 있는 글의 스타일이 완성 된다.

적용하기 귀찮으시다면 티스토리 스킨 커스텀 -by kyun 여기서 받아서 적용하시면 됩니다.

이 적용법의 문제는 다른 스킨의 경우 마찬가지로 처음부터 글이 보이는 dom을 찾아 가야한다는 것이다. 내가 쓰고 있는 스킨을 사용한다면 내 방법과 같이 하면된다.

---

정리하면

1. github-markdwon.css을 복사하여 티스토리 스킨 css 파일 최하단에 붙여넣기한다. (물론 파일을 다운받아 header에서 불러와도 된다.)
2. 티스토리 html파일에 line 233의 <div class="area_view">를 <div class="markdown-body">로 바꿔준다.
3. 저장하기를 누르고 블로그로 들어가 아름다운 github markdown style 이 적용되는 것을 확인한다.