0. Markdown CSS를 써야하는 이유 🤔

티스토리에서도 markdown을 지원하기는 하지만, 티스토리 내부 서식에 맞게 변형되어 있어 외부의 규칙으로 작성한 MarkDown이 예상대로 적용되지 않는 경우가 비일비재하다.
일례로, 티스토리는 MarkDown의 H1 태그를 변형하지 못한다. 왜냐하면 본문 H1 태그에 대한 대응처리를 하지 않았기 때문이다. 이 뿐만 아니라, 태그 사이 간격, 인라인 코드블럭도 지원되지 않는다.

Markdown Tool로 작성한 내용이 예상대로 표시되는 것을 원한다면, 밑의 과정을 따라해 보시라.

1. Markdown cdn을 Tistory Html에 복사 붙여넣기 ✂️

여기 Html에 들어가서, Html의 <head> 태그 안에 다음을 복사 붙여넣기 한다.

<!-- 모든 본문 글을 MarkDown 형태로 변경 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css" rel="stylesheet">

혹시 최신 버전이 업데이트 되었을 수 있음으로, 다음 링크에 들어가 최신버전 CDN을 확인해보길 바란다.
https://cdnjs.com/libraries/github-markdown-css

나도 위 사진과 같이 head에 추가한 다른 CDN들 사이에 집어넣었다.

2. CSS에 Markdown 전용 설정 추가 ✍🏻

해당 CDN이 Markdown의 태그 하나하나를 그에 맞는 CSS로 변환해주지만, 한가지 못해주는 것이 전체적인 틀 조정이다. 이를 고치기 위해서 CSS 칸으로 들어가 다음을 추가한다. 아무데나 추가해도 되지만, 가독성을 생각해 관련 태그들이 있는 곳에 저장하기를 바란다.
내 코드의 경우, 시중에 나와있는 것들과 달리 최대 크기를 조정했다. 내 본문 글 폭이 1200px이기 때문에 조금 더 글이 꽉 차길 바랬기 때문이다. 여러분도 여러분 티스토리 환경에 맞게 바꾸길 바란다. 밑에 @Media로 되어 있는 코드는 사용자가 767 이하 즉 테블릿 사이즈 이하에서 블로그를 봤을 때 어떻게 표현할지에 관한 것이다.

.markdown-body {
  box-sizing: border-box;
  min-width: 100px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}

이제 끝났다. 이후에는 그저 Markdown 툴로 글을 적은 뒤 티스토리 포스팅 화면에 복붙하면 된다. 하지만 여기서 주의할 점이 있다. 우리는 글을 markdown으로 적었을 뿐, *"해당 글은 markdown 이요~"* 하고 나타내는 class를 본문 태그에 적어주지 않았다. 그래서 그저 이렇게 글만 적어서 업로드하면 적용되지 않는다.
여기서 2가지 해결방법이 있는데,

하나는 수동으로 <div class="markdown"> </div> 태그를 포스팅 전에 적어주는 수동적인 방법
나머지 하나는 HTML 편집으로 업로드만 하면 자동으로 Markdown으로 포스팅되는 방법이 있다.

만약 글을 오로지 Markdown 툴로만 쓰시는 분이 계시다면 후자를 추천한다. 일단 모두 다 소개하겠다.

3. 수동으로 div 태그 추가 ✔

필자는 markdown 툴로 Typora를 쓴다. 문법으로 쓴 내용이 자동으로 변환되어 편하다. ㅎㅎ 이전에는 무료였는데, 유료로 변환되었긴 하지만, 한 번 사면 2계정인가? (정확히 기억은 안나지만) 무료니 적극 추천한다. 돈 값 하는 것 같다.

위와 같이 포스팅 페이지 상단에 양식을 마크다운으로 바꾸고, Markdown Tool로 쓴 글을 복사 붙여넣기 해넣는다. 이후 다시 양식을 HTML로 바꾼다.

이제 여기 맨 위와 맨밑을 <div class="markdown"> </div>로 덮는다. 그냥 글 전체를 감싸면 된다.

그런 다음 완료를 누르고 포스팅하면 우리가 원하는 Markdown 양식대로 출력이 된다!

근데 보다시피 과정이 너~무 귀찮다. 매번 저걸 안 까먹고 하기도 신경 쓰인다. 만약 나처럼 모든 블로그 글을 markdown으로 쓰는 사람은 4번을 참고하길 바란다.

4. Markdown 작성된 것 자동 포스팅 🤖

먼저 블로그 내의 아무 글이나 누르고 F12를 누른다. 그리고 뜬 개발자 도구 맨 우측 상단에 화살표를 눌러서, 본문 글 전체를 클릭한다.

캡처에서는 표현되지 않았지만, 나의 경우 저 본문 글 전체가 class = 'article-content'라는 곳에 저장되어 있었다. 이제 위치 파악을 했으니, 다시 블로그 편집 ➜ HTML로 들어간다.

ctrl + F로 article-content를 찾아보니,

##형태로 무엇인가 적혀있다. 어떤 문법인지 감은 안 오지만, _'아 저기가 글이 동적으로 적히는 곳 이구나'_하고 알 수 있다. 이제 해당 부분을 <div class=markdown></div>로 덮어주면 된다. 사람마다 사용하는 skin이 다르겠지만, 대충 본문 글이 동적으로 적힐 것 같은 곳에 들어가 해당 태그를 붙이며 확인하길 바란다. 몇 개 안되어서 얼마 안 걸린다!