티스토리 Markdown 적용 안되는 문제 해결 (공백, 목록, 굵기 등)

tistory에 글을 쓸 때 markdown 형식으로 글을 쓰려고 하니, 제대로 마크다운이 적용되지 않고, 조금 이상하게 나왔다.

문단 구분을 했는데 공백 라인이 생기지 않는다거나,
순서 있는 리스트를 작성했는데 앞에 번호가 안나온다 거나,
굵은 글씨 처리가 안된다거나 등등... 사실상 제대로 되는 것이 많이 없었다. 그냥 글씨만 잘 나왔다.

보니까 내가 적용 중인 skin의 css 속성 때문에 적용이 안되는 거였다. 그런데 이런 문제들을 해결하기 위해서 구글링을 해보니, 모두 markdown css를 skin에 추가하고, 글을 쓸 때 마다 html 편집 모드로 바꿔서 글의 앞, 뒤로 <div class="markdown-body"> 태그를 추가해 주는 방식만 나왔다.

그런데 글을 쓸 때 마다 저 div 태그를 추가해 주는 것은.... 굉장한 불합리로 느껴졌다.
그래서 나는 매번 div를 추가할 필요 없이 항상 제대로 적용될 수 있도록 그냥 skin의 css 자체를 바로 수정하는 방식으로 해결하였다.
관련된 내용은 구글링을 해도 나오지 않았었기에 내가 따로 정리해서 포스팅하고자 한다.

일단 내가 겪은 문제점들은 아래 항목들 이었다.

1. 줄 끝에 공백 문자를 두 번 넣어도 공백 라인 생기지 않음
2. 목록 작성 시 앞에 번호 또는 토글 아이콘이 나오지 않음
3. ** 문자 ** 처리해도 굵게 처리되지 않음

우선 내가 사용 중인 skin은 티스토리 기본 skin 중에 하나인 Letter 이다.

아래는 각 문제들의 해결법이다.

1. 공백 라인 문제

이 문제는 css 설정까지 갈 필요 없이 tistory 설정에서 해결 가능하다. (구글링해도 바로 많이 나옴)
markdown 문법에서 줄 끝 공백 문자 2개로 빈 라인을 만드는 방법은, 줄 끝 문자 2개를 문단 구분으로 인식하여 다음 내용부터 새로운 문단으로 처리하는 것이다.
문단 사이 공백이 들어가기 때문에 공백 라인이 생기는 것인데, tistory 설정에 문단 공백 설정이 안되어 있으면 다른 문단으로 처리되어도 공백 라인이 생기지 않는다.

tistory 설정에서 - 콘텐츠 - 설정 메뉴로 들어가면 아래와 같이 나오는데, 여기서 단락 앞뒤에 공백을 사용합니다 로 설정하면 된다.

2. 목록 작성 시 번호 안나옴

원래 마크다운 문법 상 [ 숫자 + . + 공백 ] 으로 작성하면 순서가 있는 리스트로 인식한다. 또 -, * 등을 사용하면 순서 없는 리스트로 인식한다. 그런데 tistory에서 위와 같이 작성하니 앞에 숫자나 목록 아이콘이 나오지 않았다.

-- 내가 기대한 바 --
1. 가
2. 나
3. 다

-- 실제 보이는 내용 --
  가
  나
  다

markdown 문법에서 순서가 있는 목록은 html ol 태그로 변환되고, 순서가 없는 목록은 ul 태그로 변환된다.
내 Letter skin의 css를 확인해 보니 ol / ul 태그에 list-style-type이 제대로 지정되어 있지 않았다.

그래서 리스트 css 부분을 아래와 같이 수정해 주었다.

/* 리스트 */
#article-view ul li,
#article-view ol li {
  margin: 0 0 3px 22px;
  line-height: 1.7;
}

#article-view ul,
#article-view ol {
  margin: 14px auto 24px;
  padding: 0 0 0 10px;
}

#article-view ol ol,
#article-view ul ol {
  list-style-type: lower-roman;
}

#article-view ul ul ol,
#article-view ul ol ol,
#article-view ol ul ol,
#article-view ol ol ol {
  list-style-type: lower-alpha;
}

#article-view ol[type="a s"] {
  list-style-type: lower-alpha;
}

#article-view ol[type="A s"] {
  list-style-type: upper-alpha;
}

#article-view ol[type="i s"] {
  list-style-type: lower-roman;
}

#article-view ol[type="I s"] {
  list-style-type: upper-roman;
}

#article-view ol[type="1"] {
  list-style-type: decimal;
}

#article-view div>ol:not([type]) {
  list-style-type: decimal;
}

이후 제대로 나오는 것을 확인했다.

3. 굵게 처리 안됨

markdown에서 **문자** 를 사용하면 굵게 처리가 되어야 하는데, 굵게 처리가 되지 않았다.
markdown에서 굵게 처리하는 방법은 **로 감싸인 문자를 em 태그로 변환하여 굵게 처리하는 것인데,
css를 확인해보니 아래와 같이 em 태그의 style이 normal로 박혀 있었다.

address, em {
  font-style: normal
}

따라서 아래 처럼 여기에서 em 태그를 지웠다.

address {
  font-style: normal
}

이후 제대로 굵게 표시되는 것을 확인했다.

4. markdown 형식에서 내가 원하는 글씨체 적용하기

추가로, 문제는 아니지만 markdown 형식에서 내가 원하는 글씨체를 적용하고 싶었다.
우선 눈누 (눈누 아니어도 됨. google font family 사용해도 됨) 에서 원하는 글씨체를 정하고, 우측에 친절하게 알려주는 font 정보를 복사한다.

https://noonnu.cc/.

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

해당 정보를 복사했으면, 내 skin의 css 파일 맨 위에 src를 import한다. 기본적으로 Lato 링크가 import되어 있을 것이다.

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@import url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff');

그리고 아래 처럼 article_content와 article_view 속성으로 font를 지정한다. 기존에는 font-size와 line-height만 기본으로 지정되어 있었을 것이다.

.article_content .article_view {
  font-size: 16px;
  line-height: 24px;
  font-family: 'Pretendard-Regular';
  font-weight: 500;
  font-style: normal;
}

이렇게 하면 해당 글씨체가 적용이 된다.
이렇게 하면 장점은 글을 쓸 때 마다 markdown-body 태그를 안붙여도 된다는 것이지만,
반대로 단점은 기본으로 그냥 적용시켜 버린 것이기 때문에 내가 기본모드에서 글씨체를 어떻게 바꿔도 기본모드에서 선택한 글씨체는 적용되지 않는다는 것이다.

기본모드에서 따로, 마크다운 모드에서 따로 사용하고 싶다면 마크다운 모드로 사용하고 싶을 때만 markdown-body 태그로 감싸는 방식을 사용해야 한다.
하지만 나는 기본적으로 글씨체를 한번 정하고 나서 바꿀일이 딱히 없을 것 같기 때문에.. 이렇게 기본으로 적용시켰다.