티스토리(Tistory) 마크다운(Markdown) 적용
마크다운(Maekdwon) 이란?
마크다운(Markdown)은 일종의 마크업 언어로 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 엔하위키에 글을 쓸 때 위키 언어를 이용해서 글을 써야하는데, 마크다운 언어는 그 위키 언어와 상당히 유사하다고 할 수 있다. 하지만 마크다운은 위키문법보다 훨씬 더 간단하므로 익히는데 그리 긴 시간이 필요하지 않다는 장점을 가지고 있다. 확장자는 .md를 사용한다.
마크다운 장점 & 단점
-
마크다운의 장점
읽기 쉽다
익히기 쉽다
모바일 친화적이다
-
마크다운의 단점
문법이 너무 단순하다
확장 문법이 많다
멀티미디어 삽입이 불편하다.
티스토리 블로그에 마크다운(Markdwon) 설정 적용 하는 법
-
github-markdown-css 다운로드
-
github-markdown.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; } } -
Tistory 설정 ( 블로그 관리자 페이지 http://yourName.tistory.com/manage)
- 스킨 편집
- Html 편집 클릭
- 파일업로드
GitHub 에서 다운로드한 github-markdown.css 파일만 파일업로드 하시면 됩니다. 저는 파일이름을 markdwon.css로 변경하여 파일 업로드 하였습니다.
- HTML 편집
-
업로드한 css 파일을 html 에서 link 태그로 연결
<head> <link rel="stylesheet" href="./images/markdown.css"> </head>
타이포라 설치 마크다운(Markdown)으로 작성
마크다운(Markdown) 에디터인 타이포라(Typora)를 설치 합니다.
추후 타이포라에 관련한 설명 및 단축키에 대하여 작성하겠습니다.
-
타이포라(Typota) -> 파일(file) -> 내보내기(export) -> HTML(Without Styles)
티스토리 게시물 작성
- 티스토리 게시글에서 HTML 체크박스를 적용시킵니다.
- 타이포라(Typora)로 작성한 마크다운 글을 HTML(Without Styples)파일을 내보내기 하신후 HTML 소스를 command + c (복사 붙여넣기) 를 하여 티스토리에 붙여 넣기 합니다.
- Body 태그에 class="markdown-body" 적용
-
이미지 업로드
-
사진은 HTML 체크박스 클릭전에 사진을 클릭하여 이미지를 미리 업로드 합니다.
이미지를 미리 업로드한후 html 체크박스를 클릭하여 html 소스코드로 바뀐 내용을 마크다운으로 작성한 게시물의 원하는 위치에 복사 붙여 넣기 하는 방식으로 하고 있습니다.
혹시 편하게 이미지 업로드 하는 방법을 아시는 분은 댓글을 통해 알려주시면 감사하겠습니다.
