티스토리 마크다운이 이상할 때(티스토리에 Markdown CSS 적용하는 방법)

티스토리를 개설하고 준비하는 과정부터 많은 난관에 부딪혔는데, 그중 하나가 마크다운 문법을 티스토리에서 활용할 때 뭔가 이질감이 든다는 것이다.

 

이용자의 편의를 위해 티스토리는 스킨을 제공하고 있고, 이 스킨에서 사용하는 CSS로 인해 마크다운 형식이 제대로 표현되지 않고 왜곡되는 현상이 발생한다고 한다.

 

이는 현재 우리가 사용하고 있는 스킨의 HTML 및 CSS 소스코드에 마크다운과 관련된 부분을 추가해 줌으로써 간단하게 해결된다고 하니 한 번 해결해보자!

 

1. CSS 코드 선택하기

https://cdnjs.com/libraries/github-markdown-css 링크로 접속하여 본인이 원하는 css를 선택한다. 본인은 light 모드에 빠른 속도를 위해 min을 선택해서, 5.2.0/github-markdown-light.css 를 선택했다(현재 23.07.24 기준 최신 버전은 5.2.0 버전이다) 선택을 했으면 사슬 모양을 클릭하여 링크 주소를 복사해주면 된다.

 

2. 스킨 편집하기(HTML, CSS)

복사한 링크는 티스토리 블로그 관리의 스킨편집 기능을 이용하여, HTML 내용에 추가를 해주면 된다.

스킨 편집 클릭

 

html 편집 클릭

2-1 HTML 편집

HTML 편집으로 들어오면 아래와 같이 머리가 아파지는 화면을 마주하게 되는데, 걱정하지 말고 우리는 복사한 걸 단순히 붙여넣어주면 된다. head와 /head 사이에 넣어주면 되는데, 보통 3번째 줄에 있고 커서를 가져다 대면 /head도 찾아주니 정말 간단하다!

찾은 이후에는 설정을 건드릴 수도 있으니 head의 가장 아래 쪽인 /head 바로 위에 아까 복사했던 링크를 붙여넣기 해준 뒤 우측상단의 적용버튼을 눌러 적용해주자.

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

* 막간 상식

html 문법에서의 주석처리는 <!-- 내용 --> 을 이용하면 된다. 33줄과 35줄은 나중을 위해 추가한 것이니 해도 되고 안해도 된다.

 

2-2 CSS 편집

적용한 뒤에는 HTML 오른쪽의 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;
	} 
}

해당 코드를 위와 같이 실제 CSS 화면 가장 하단부에 복사 후 붙여넣기를 해준 뒤 적용을 눌러주면 스킨편집은 끝!

 

3. 마크다운 기능 실제 사용

실제로 마크다운 모드에서 작성을 한 뒤에 번거로운 과정이 하나 남아있다. 마크다운 작성이 끝나면, HTML 모드에서 div 태그를 추가해야 한다. CSS에서 markdown-body 라는 class의 속성을 추가해 준 방식이기 때문에 마크다운으로 작성한 내용을 markdown-body class로 감싸줘야 CSS가 작동하기 때문이다.

 

<div class="markdown-body">

<!--마크다운으로 작성한 내용-->

</div>

 

이런 방법이 불편하다면, 조금이나마 품을 덜 들일 수 있는 방법이 있는데 티스토리 서식 기능을 이용하는 것이다.

반응형

4. 서식을 활용한

마크다운 사용

4-1 서식 만들기

간단히 사용하면 단축키나 상용구 같은 개념으로 "티스토리 서식 기능"을 활용하는 것이다.

블로그 관리 ㅡ 서식 관리 ㅡ 우상단 서식쓰기 클릭

서식쓰기를 누르고 들어오면 위와 같은 화면이 나온다. 제목은 편의상 마크다운 시작으로 작성했고, 우측 상단에 보면 ··· 이 있고 누른 뒤 HTML 블럭을 눌러 추가한뒤, HTML 블럭에 아래 코드를 입력해준다.

<div class="markdown-body">

똑같은 방식으로 서식을 추가하여 이번에는 제목을 마크다운 완료로 작성하고, 코드는 아래 코드와 같이 입력해주면 된다.

</div>

 

4-2 서식 실제 적용하기

이후 아래와 같이 ···  에서 서식을 눌러주고 글의 처음부분에는 아까 만들었던 서식 "마크다운 시작"을 불러오고, 글의 마지막 부분에는 서식 "마크다운 완료"를 넣어주게 되면 ...!

두 구 두 구 두 구 두 구(이미 스포가 어느정도 되는 것 같은데)

 

대망의 최종본...!을 확인해보면 아래와 같이 마크다운 문법이 구현되는 것을 확인해볼 수 있습니다

(나자신에게 박수 짝짝)

 

마크다운은 Github에서도 구현이 잘되기 때문에 앞으로 공부하면서 티스토리에 올릴 내용 따로~ 깃허브에 올릴 용도 따로~ 공부용 파일 따로~ 이런 벌써부터 스트레스 받는 일은 안해도 되니 정말 뿌듯한 공부였다!