구글 블로거(Blogger) 에서 마크다운으로 포스팅하는 방법

구글 블로거(Blogger)에서 마크다운으로 포스팅하는 방법

글을 작성할 때 마크다운(markdown)으로 자주 작성하는데 구글 블로그에서도 마크다운으로 작성할 수 있도록 하는 방법을 정리함

구글 블로거의 html모드에서 마크다운으로 작성하고 publish 하면 브라우저에서 마크다운을 html 로 변환해서 보여주게 되는 방식임

따라서 실제 저장되어 있는 문서는 마크다운이고 저장된 마크다운 문서를 다른 곳에서도 그대로 이용 가능

적용 방법

javascript를 조금 할 줄 알면 쉽게 적용가능 할 듯...

블로거 템플릿 수정으로 들어가 </head> 태그 바로 앞에 다음 태그를 추가

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css"/>

템플릿 하단에서 </body> 태그 바로 앞에 다음 태그를 추가

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/showdown/1.6.2/showdown.min.js' type='text/javascript'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
<script src='//mxp22.surge.sh/markdown-highlight-in-blogger.js' type='text/javascript'></script>

템플릿을 저장

아래 링크는 개발자 것으로 보이며 개발 히스토리나 상세한 내용을 확인하려면 방문하여 확인하는 것도 좋을 듯...

• http://blog.chukhang.com/2011/09/markdown-in-blogger.html
• https://js-react.blogspot.kr/2017/01/using-markdown-in-blogger.html

실제 작성할 때는 다음과 같이 넣어서 작성하면 됨

<pre class="markdown">
<xmp>
</xmp>
</pre>

테스트

다음 내용들은 markdown으로 작성한 내용임

라인 테스트

---

var test = '잘되나? 잘됨!';

제목1

제목2

제목3

제목4

제목5

제목6

• 리스트 1
• 리스트 2
• 리스트 3

굵은 글씨

설명1
설명2

테이블

컬럼1	컬럼2
이름	홍길동

링크