티스토리에 마크다운 적용 방법

티스토리에 마크다운 문법을 적용하는 방법

1. 티스토리에 마크다운 파일 업로드

참고사항
 * 본 마크다운은 반응형 스킨을 사용할 때 적용 가능합니다.
 * 모바일웹 스킨을 사용하지 않아야 합니다.(반응형 기본)

먼저 첨부파일을 다운로드 받아 주세요.

다운받은 파일은 추 후 사용될 예정이니 어디다 다운 받았는지 잘 기억해 두시기 바랍니다.

티스토리 관리자로 들어갑니다.

관리자 화면에서 좌측 메뉴 중 꾸미기 -> HTML/CSS 편집 을 클릭합니다.

Step1

새 창으로 뜬 편집창 우측에서 파일업로드 링크를 클릭합니다.

Step2

페이지 우측 하단에 +추가 버튼을 클릭합니다.

Step3

파일 선택창이 뜨면 위에서 다운 받은 경로로 찾아가 다운받은 CSS 파일을 선택 후

열기 버튼을 클릭합니다.
Step4

파일이 정상적으로 올라갔는지 확인 후 페이지 상단의 HTML 링크를 눌러 소스편집으로 돌아갑니다.

Step15

아래 이미지처럼 소스를 편집해 주세요.

Step6

소스상에서 </head> 위에 아래 소스를 넣어주세요.

<link href="./images/markdown_atom_light.css" rel="stylesheet">

그 후 <body> 안에 아래 소스를 넣어주세요.

class='markdown-preview'

즉 완성된 소스는

<link href="./images/markdown_atom_light.css" rel="stylesheet">
</head>
 
<body id="tt-body-page" class='markdown-preview'>

와 같은 형태가 되어 있어야 합니다.

모두 다 했다면 저장버튼을 눌러 작업을 완료해 주세요.

편집창을 닫고 관리자 화면으로 넘어온 후 글 설정 메뉴에서 글쓰기 환경을 HTML모드로 선택하고 저장합니다.

Step7

마찬가지로 좌측메뉴에서 모바일웹 스킨을 선택한 후 OFF를 선택 후 저장해 줍니다. (반드시 반응형 스킨을 사용하셔야 합니다.)

Step8

이제 글쓰기로 들어가셔서 마크다운으로 작성된 페이지를 HTML로 변환시킨 파일의 소스를 붙여넣으시면 됩니다.
이 부분은 다음에 알려드리도록 하겠습니다.

+ Recent posts