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

* 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; }

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