본문 바로가기
Blog

티스토리에 마크다운(Markdown) 및 소스코드(highlight.js) 적용

dev.psw 2018. 2. 22. 20:50

참고자료

환경

  • Mac OS

 

들어가며

Swift 블로그를 개설하면서 마크다운을 사용하기로 했습니다. 마크다운을 사용하는 이유는 아래와 같습니다.


  1. 작성한 글들을 파일 형태로 보관 할 수 있습니다.
  2. 작성한 글의 버전 관리가 가능합니다.
  3. Github의 README.md 처럼 다양한 플랫폼에서 동일한 형식을 유지할 수 있습니다.
  4. 초기에 학습을 해야하는 부담이 있지만 익숙해진다면 편하게 다양한 기능들을 사용할 수 있습니다.

 

다만 해당 내용을 적용하는 데는 조금 번거로운 부분이 있습니다. 티스토리에서도 마크다운 에디터가 적용되었으면 하는 바램입니다.

 


목차

  1. Markdown 적용
  2. highlight.js 적용
  3. 마크다운 에디터(Markdown Editor) 사용



1. Markdown 적용

  1. github-markdwon-css에서 파일 다운로드합니다.

  2. 본인의 티스토리 설정 - html 편집 - 파일업로드로 이동합니다.

  3. github-markdown.css을 업로드 합니다.

  4. HTML 탭으로 이동합니다.

  5. <head>와 </head>안에 아래 코드를 삽입합니다.

  6. <head>
    ...

    <!-- 마크다운 css -->
	<link rel="stylesheet" href="./images/github-markdown.css">
    
	...
</head>

 


2. highlight.js 적용

  1. highlight.js의 다운로드 페이지로 이동합니다.

  2. 필요한 언어들을 선택하여 다운로드 합니다. 


  3. 다운로드를 완료한 후 압축을 푼 뒤 styles 폴더로 이동합니다.

  4. 해당 폴더에는 다양한 style들이 있는데 샘플 페이지에서 참고 가능합니다.

  5. 티스토리 설정 - html 편집 - HTML탭에서 아래 코드를 삽입합니다. (작성자는 xcode.css를 적용한 상태)

    <head>
    ...

    <!-- highlights.js css -->
	<link rel="stylesheet" href="./images/xcode.css">
	<script src="./images/highlight.pack.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>
    
	...
</head>

 


3. 마크다운 에디터(Markdown Editor) 사용

마크다운 에디터는 여러가지 종류가 있습니다. 맥에서 사용가능한 마크다운 에디터들의 종류는 What are the best Markdown editors for OS X를 참고하시면 자신에게 맞는 에디터를 고를 수 있습니다.

 

저는 typora를 사용합니다.

 

typora 소개

  1. 보통 마크다운 에디터는 좌우로 분리 되어 좌측에 작성 하고 우측에 preview를 제공하는데 typora는 실시간으로 적용 된 모습을 볼 수 있습니다.
  2. 마크다운 문법이 헷갈릴 때 참고 할 수 있는 문서를 제공합니다. 
  4. 단축키를 통해 입력하기 까다로운 문법을 쉽게 입력할 수 있도록 도와줍니다. (ex: 테이블 만들기) 
  6. 드래그 앤 드롭으로 이미지 삽입이 가능합니다.
  7. 이 외에도 다양한 기능들을 제공합니다. 해당 기능들은 홈페이지에서 확인가능합니다.


작성법

  1. 마크다운 문법에 맞추어 글을 작성합니다.
  2. 작성이 완료 된 파일은 HTML(Without Styles)을 통해 파일로 뽑아냅니다. 
  4. 티스토리 글쓰는 창에서 html모드로 선택한 후 해당 코드를 복사 붙여넣기 합니다.
  5. 미리보기를 통해 해당 글을 확인합니다. 
  6. 사진을 삽입하는 부분은 좀 귀찮습니다만 일일히 다시 등록해야합니다..


저작자표시 비영리 변경금지

티스토리툴바