개요

티스토리에 마크다운 적용하기1편: http://dailydev.tistory.com/17

1편에 이어서

또 다른 방법으로 마크다운을 적용하는 방법을 알아보겠습니다.

참고로, 지금 보고있는 이 글이 이렇게 작성되었습니다

STEP 1. atom 설치

필자의 경우 atom 에디터를 사용하여 마크다운을 작성합니다.
atom 에디터 공식홈페이지 : https://atom.io/

STEP 2. 패키지 설치

설치가 완료되면 마크다운 전용 패키지를 설치할 겁니다.

atom 을 실행한 후 control + ,(콤마) 를 누르면 Settings 가 나옵니다

그 후 아래 스크린샷처럼 install 에 들어간 후 markdown-preview 를 검색합니다.

지금 이 글도 atom 으로 작성하는데 저는 개인적으로 markdown-preview-enchanced 가 마음에 들어서 선택하였습니다.

설치하게되면 자동으로 적용됩니다.

control + shift + m 을 누르면 오른쪽 화면에 preview 화면이 나타나게됩니다

설치 후 패키지 세팅에 들어가서 USE GitHub.com style 를 선택하면 필자와 같이 하얀 배경으로 작성됩니다.

STEP 3. 글 작성

마크다운 작성은 문법에 맞게 작성합니다.

github guides : https://guides.github.com/features/mastering-markdown/
개인적으로는 이 사이트가 가장 완벽하게 설명하고 있다고 생각하지만 영어라서 불편하시다면

간단하게나마 다음 게시물을 보고 작성합니다.
https://gist.github.com/ihoneymon/652be052a0727ad59601

STEP 4. 게시글 업로드

마지막 단계입니다.
모든 글을 작성 완료했으면

1. md 확장자로 저장합니다.

2. 다음 이미지와 같이 atom 우측 preview 화면에서 우클릭 한후 Open in Browser 를 선택합니다.
   

3. 브라우저가 열리면 다음과 같이 아무데서나 우클릭 한 후 소스보기를 누릅니다.
   

4. 소스를 전체 복사한 후 다음의 티스토리 글쓰기 페이지에서 우측 상단에 HTML 을 체크합니다.
   

5. 체크 한 후 아까 복사한 소스를 붙여넣고 글쓰면 완료!

티스토리에 마크다운 적용하기

* Markdown 이란?

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다.
읽기도 쓰기도 쉽다는 장점이 있다.
그루버는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었다.
확장자는 .md를 쓴다.

출처: 나무위키

마크다운 적용하기

티스토리에 마크다운을 적용하는 방법은 생각보다 간단합니다.
제대로 나와있는 사이트가 없어서 새로 만든 후 공유 합니다.

1. 관리자를 들어갑니다

2. 다음 그림처럼 HTML/CSS 편집을 들어갑니다

3. 다음 그림처럼 우측 상단의 css를 누릅니다.

4. 그러면 방금 누른 CSS버튼 아래로 기존의 CSS 코드가 있는데, 기존 코드는 지우지 마시고 제 블로그 아래의 코드를 복사해서 기존 코드 맨 밑에다가 추가합니다.

빨간색이 새로 추가한 코드입니다.
위 이미지처럼 아래 코드들을 복사해서 추가해주세요

/* 깃허브 마크다운 css */
 
.area_view body {
  font-family: Helvetica, arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background-color: white !important;
  padding: 30px !important; }
 
.area_view body > *:first-child {
  margin-top: 0 !important; }
.area_view body > *:last-child {
  margin-bottom: 0 !important; }
 
.area_view a {
  color: #4183C4 !important; }
.area_view a.absent {
  color: #cc0000 !important; }
.area_view a.anchor {
  display: block !important;
  padding-left: 30px !important;
  margin-left: -30px !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important; }
 
.area_view h1, .area_view h2, .area_view h3, .area_view h4, .area_view h5, .area_view h6 {
  margin: 20px 0 10px !important;
  padding: 0 !important;
  font-weight: bold !important;
  -webkit-font-smoothing: antialiased !important;
  cursor: text !important;
  position: relative !important; }
 
.area_view h1:hover a.anchor, .area_view h2:hover a.anchor, .area_view h3:hover a.anchor, .area_view h4:hover a.anchor, .area_view h5:hover a.anchor, .area_view h6:hover a.anchor {
  background: url("../../images/modules/styleguide/para.png") no-repeat 10px center !important;
  text-decoration: none !important; }
 
.area_view h1 tt, .area_view h1 code {
  font-size: inherit !important; }
 
.area_view h2 tt, .area_view h2 code {
  font-size: inherit !important; }
 
.area_view h3 tt, .area_view h3 code {
  font-size: inherit !important; }
 
.area_view h4 tt, .area_view h4 code {
  font-size: inherit !important; }
 
.area_view h5 tt, .area_view h5 code {
  font-size: inherit !important; }
 
.area_view h6 tt, .area_view h6 code {
  font-size: inherit !important; }
 
.area_view h1 {
  font-size: 28px !important;
  color: black !important; }
 
.area_view h2 {
  font-size: 24px !important;
  border-bottom: 1px solid #cccccc !important;
  color: black !important; }
 
.area_view h3 {
  font-size: 18px !important; }
 
.area_view h4 {
  font-size: 16px !important; }
 
.area_view h5 {
  font-size: 14px !important; }
 
.area_view h6 {
  color: #777777 !important;
  font-size: 14px !important; }
 
.area_view p, .area_view blockquote, .area_view ul, .area_view ol, .area_view dl, .area_view li, .area_view table, .area_view pre {
  margin: 15px 0 !important; }
 
.area_view hr {
  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0 !important;
  border: 0 none !important;
  color: #cccccc !important;
  height: 4px !important;
  padding: 0 !important; }
 
.area_view body > h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }
.area_view body > h1:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }
.area_view body > h1:first-child + h2 {
    margin-top: 0 !important;
    padding-top: 0 !important; }
.area_view body > h3:first-child, .area_view body > h4:first-child, .area_view body > h5:first-child, .area_view body > h6:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }
 
.area_view a:first-child h1, .area_view a:first-child h2, .area_view a:first-child h3, .area_view a:first-child h4, .area_view a:first-child h5, .area_view a:first-child h6 {
  margin-top: 0 !important;
  padding-top: 0 !important; }
 
.area_view h1 p, .area_view h2 p, .area_view h3 p, .area_view h4 p, .area_view h5 p, .area_view h6 p {
  margin-top: 0 !important; }
 
.area_view li p.first {
  display: inline-block !important; }
 
.area_view ul, .area_view ol {
  padding-left: 30px !important; }
 
.area_view ul :first-child, .area_view ol :first-child {
  margin-top: 0 !important; }
 
.area_view ul :last-child, .area_view ol :last-child {
  margin-bottom: 0 !important; }
 
.area_view dl {
  padding: 0 !important; }
  .area_view dl dt {
    font-size: 14px !important;
    font-weight: bold !important;
    font-style: italic !important;
    padding: 0 !important;
    margin: 15px 0 5px !important; }
    .area_view dl dt:first-child {
      padding: 0 !important; }
    .area_view dl dt > :first-child {
      margin-top: 0 !important; }
    .area_view dl dt > :last-child {
      margin-bottom: 0 !important; }
  .area_view dl dd {
    margin: 0 0 15px !important;
    padding: 0 15px !important; }
    .area_view dl dd > :first-child {
      margin-top: 0 !important; }
    .area_view dl dd > :last-child {
      margin-bottom: 0 !important; }
 
.area_view blockquote {
  border-left: 4px solid #dddddd !important;
  padding: 0 15px !important;
  color: #777777 !important; }
  .area_view blockquote > :first-child {
    margin-top: 0 !important; }
  .area_view blockquote > :last-child {
    margin-bottom: 0 !important; }
 
.area_view table {
  padding: 0 !important; }
  .area_view table tr {
    border-top: 1px solid #cccccc !important;
    background-color: white !important;
    margin: 0 !important;
    padding: 0 !important; }
    .area_view table tr:nth-child(2n) {
      background-color: #f8f8f8 !important; }
    .area_view table tr th {
      font-weight: bold !important;
      border: 1px solid #cccccc !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 6px 13px !important; }
    .area_view table tr td {
      border: 1px solid #cccccc !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 6px 13px !important; }
    .area_view table tr th :first-child, .area_view table tr td :first-child {
      margin-top: 0 !important; }
    .area_view table tr th :last-child, .area_view table tr td :last-child {
      margin-bottom: 0 !important; }
 
.area_view img {
  max-width: 100% !important; }
 
.area_view span.frame {
  display: block !important;
  overflow: hidden !important; }
  .area_view span.frame > span {
    border: 1px solid #dddddd !important;
    display: block !important;
    float: left !important;
    overflow: hidden !important;
    margin: 13px 0 0 !important;
    padding: 7px !important;
    width: auto !important; }
  .area_view span.frame span img {
    display: block !important;
    float: left !important; }
  .area_view span.frame span span {
    clear: both !important;
    color: #333333 !important;
    display: block !important;
    padding: 5px 0 0 !important; }
.area_view span.align-center {
  display: block !important;
  overflow: hidden !important;
  clear: both !important; }
  .area_view span.align-center > span {
    display: block !important;
    overflow: hidden !important;
    margin: 13px auto 0 !important;
    text-align: center !important; }
  .area_view span.align-center span img {
    margin: 0 auto !important;
    text-align: center !important; }
.area_view span.align-right {
  display: block !important;
  overflow: hidden !important;
  clear: both !important; }
  .area_view span.align-right > span {
    display: block !important;
    overflow: hidden !important;
    margin: 13px 0 0 !important;
    text-align: right !important; }
  .area_view span.align-right span img {
    margin: 0 !important;
    text-align: right !important; }
.area_view span.float-left {
  display: block !important;
  margin-right: 13px !important;
  overflow: hidden !important;
  float: left !important; }
  .area_view span.float-left span {
    margin: 13px 0 0 !important; }
.area_view span.float-right {
  display: block !important;
  margin-left: 13px !important;
  overflow: hidden !important;
  float: right !important; }
  .area_view span.float-right > span {
    display: block !important;
    overflow: hidden !important;
    margin: 13px auto 0 !important;
    text-align: right !important; }
 
.area_view code, .area_view tt {
  margin: 0 2px !important;
  padding: 0 5px !important;
  white-space: nowrap !important;
  border: 1px solid #eaeaea !important;
  background-color: #f8f8f8 !important;
  border-radius: 3px !important; }
 
.area_view pre code {
  margin: 0 !important;
  padding: 0 !important;
  white-space: pre !important;
  border: none !important;
  background: transparent !important; }
 
.area_view .highlight pre {
  background-color: #f8f8f8 !important;
  border: 1px solid #cccccc !important;
  font-size: 13px !important;
  line-height: 19px !important;
  overflow: auto !important;
  padding: 6px 10px !important;
  border-radius: 3px !important; }
 
.area_view pre {
  background-color: #f8f8f8 !important;
  border: 1px solid #cccccc !important;
  font-size: 13px !important;
  line-height: 19px !important;
  overflow: auto !important;
  padding: 6px 10px !important;
  border-radius: 3px !important; }
  .area_view pre code, .area_view pre tt {
    background-color: transparent !important;
    border: none !important; }

저장하면 적용되었을 겁니다.
질문사항은 댓글로 남겨주세요 :)