TiStory

TiStory에서 MarkDown으로 만든 HTML 사용하기

SambaLim 2019. 1. 13. 11:36
TiStory에서 MarkDown으로 만든 HTML 사용하기

TiStory에서 MarkDown으로 만든 HTML 사용하기

 

MarkDown - CSS 다운로드

https://github.com/sindresorhus/github-markdown-css

 

페이지 우측 상단의 [Clone or Download] → [Download ZIP] 을 클릭하여 전체 소스를 다운로드

 

CSS 수정

  1. 다운로드한 'github-markdown-css-gh-pages.zip'파일의 압축을 해제
  2. 폴더 내의 'github-markdown.css' 파일을 편집기(ex. Notepadd++, VS Code)로 실행
  3. '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;

  }
}

 

관리자 페이지 설정

  1. TiStory 블로그관리 페이지로 이동
  2. 좌측 메뉴 [꾸미기] → [스킨 편집] 으로 이동

  1. 우측 상단의 [html 편집] 클릭!
  2. 우측 상단의 [파일업로드] 클릭 후, 'github-markdown.css' 추가

  1. [HTML] 클릭 후, 태그 내에 아래의 코드 추가

 

<link rel="stylesheet" href="./images/github-markdown.css" />

 

글쓰기

  1. 글을 작성할 때, 우측 상단의 HTML 체크박스 클릭!
  2. body 태그 내에 'class="markdown-body"' 추가

 

<body class="markdown-body">
    ...
</body>

 

'TiStory' 카테고리의 다른 글

쿠팡 파트너스 가입하기 추천인코드  (0) 2019.02.02
TiStory 애드센스 시작하기  (2) 2019.01.28
Markdown 이란?  (0) 2019.01.15
Tistory에 MarkDown으로 글쓰기  (1) 2019.01.13