<![CDATA[
## 구글 블로거에서 마크다운 사용하는 방법
구글 블로거를 쓰면서 불편했던 부분이 코드 편집의 어려움이었다. markdown을 쓸 수 있다면 그런 문제도 해결되고 보다 가독성 있게 쓸 수 있을텐데라는 생각에 사용 방법을 찾아 사용했봤다.
여러 방법을 사용해본 후 가장 간편하면서, 내게 잘 맞아 지금도 사용하고 있는 방법을 소개하려고 한다.
### cdn을 이용한 markdown 사용 방법
---
아래 사진을 보고 따라하면 1분 만에도 설정할 수 있다. 아래 이미지와 같이 블로거 쓰는 페이지에서 테마를 클릭한다.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipCxKki-7tLq7D3VkKg-j0fnP9NJ9D5hpg8sPsXpXmenEx1WTH7pBARXHcI58WxR1LcicEpicF-3QO0h6uvvtCFLJr1IyoNbzyLP11ZUqvm_wthWzu11cggfEFpY78Ua4oYBp7diajkNAV/s1600/1.png" imageanchor="1"><img border="0" data-original-height="1039" data-original-width="1600" height="415" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipCxKki-7tLq7D3VkKg-j0fnP9NJ9D5hpg8sPsXpXmenEx1WTH7pBARXHcI58WxR1LcicEpicF-3QO0h6uvvtCFLJr1IyoNbzyLP11ZUqvm_wthWzu11cggfEFpY78Ua4oYBp7diajkNAV/s640/1.png" width="640" /></a>
그 다음 오른쪽 상단에 버튼을 누른 후 HTML 편집을 클릭한다.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-3ALBbEDzjxmuAV57YuvdOieCCo-0F66a4OFtOj2MSn9Cj4KpYstNco8yd5q1xDaCLz9iXR9pD5UOlE8UVAruoKNMNJF9aqnTr0cXX1vWOuS9tajIeCxXca54z9fMrHVCPgobJGEquEL/s1600/2.png" imageanchor="1"><img border="0" data-original-height="717" data-original-width="1600" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-3ALBbEDzjxmuAV57YuvdOieCCo-0F66a4OFtOj2MSn9Cj4KpYstNco8yd5q1xDaCLz9iXR9pD5UOlE8UVAruoKNMNJF9aqnTr0cXX1vWOuS9tajIeCxXca54z9fMrHVCPgobJGEquEL/s640/2.png" width="640" /></a>
그 다음 아래 코드를 아래 이미지와 같은 위치에 복사한다.
```html
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css" rel="stylesheet"></link>
```
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvK48y7rn6k_qzYuS9GcX2vhejBY5aEj_32mNYs2IwnWai9a3HlU_4vuiVTDklz_PQzXO_l41cZOPaBrT0maOpWTAw7QHNeMthVjczWFxgnaN8iCiBghkaaNOuYQ67aBeY20fcLJ1PmdT/s1600/3.png" imageanchor="1"><img border="0" data-original-height="650" data-original-width="1600" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvK48y7rn6k_qzYuS9GcX2vhejBY5aEj_32mNYs2IwnWai9a3HlU_4vuiVTDklz_PQzXO_l41cZOPaBrT0maOpWTAw7QHNeMthVjczWFxgnaN8iCiBghkaaNOuYQ67aBeY20fcLJ1PmdT/s640/3.png" width="640" /></a>
그 다음 아래 코드를 맨 아래 쪽으로 내려가서 아래 이미지와 같은 위치에 복사한다.
```html
<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>
```
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihX-lyZ0LaOjNrY4SMgTes9lIAUdA4_Cc4lyup0xXVA3kY4JtUtHVSCzv8g1SUA0AWdd_g5ru1Cf8fclIWpwoaXjOvmSWTk1FDE-5Nzvu89iiSGU3jegHxX1tMoMWmag1VNNCTxhXAJehZ/s1600/4.png" imageanchor="1"><img border="0" data-original-height="1083" data-original-width="1600" height="434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihX-lyZ0LaOjNrY4SMgTes9lIAUdA4_Cc4lyup0xXVA3kY4JtUtHVSCzv8g1SUA0AWdd_g5ru1Cf8fclIWpwoaXjOvmSWTk1FDE-5Nzvu89iiSGU3jegHxX1tMoMWmag1VNNCTxhXAJehZ/s640/4.png" width="640" /></a>
그 다음 아래 이미지와 같이 맨 하단의 오른쪽 부분의 디스크 모양을 클릭해 저장한다. 꼭 클릭해서 저장 !
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJQCsUaVg4tTHSeKZI1SurWs-gkIc2I34NRXgvJ6mERBb2p8r4-ttMuPvXZGWYWq_ae3tOrmxkDDpphEsu5L_ryWgwKlv6kFYRtEcftnBNzY2u-lkCeWnI1Znd9pisYaGlDtuYlg4WON85/s1600/5.png" imageanchor="1"><img border="0" data-original-height="191" data-original-width="1600" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJQCsUaVg4tTHSeKZI1SurWs-gkIc2I34NRXgvJ6mERBb2p8r4-ttMuPvXZGWYWq_ae3tOrmxkDDpphEsu5L_ryWgwKlv6kFYRtEcftnBNzY2u-lkCeWnI1Znd9pisYaGlDtuYlg4WON85/s640/5.png" width="640" /></a>
그 다음 설정 => 글, 댓글 및 공유에 들어가 "추가" 버튼을 클릭한다.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE8Sh1M_DvYQ4_Q7XgUnrrfZfcBoW-iR7EH3Y1pExc0VB9MZ1BcmRyw3Mmel6n9IPN6exkOUACuPVdUDE2A4Rotq5lSPcpAgyDZIIWXZG8fiKH09kfAeRxJKsy9aTiZ3Z1VbFZccxRDBM/s1600/6.png" imageanchor="1"><img border="0" data-original-height="1136" data-original-width="1576" height="462" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE8Sh1M_DvYQ4_Q7XgUnrrfZfcBoW-iR7EH3Y1pExc0VB9MZ1BcmRyw3Mmel6n9IPN6exkOUACuPVdUDE2A4Rotq5lSPcpAgyDZIIWXZG8fiKH09kfAeRxJKsy9aTiZ3Z1VbFZccxRDBM/s640/6.png" width="640" /></a>
아래 이미지와 같이 아래 코드를 입력하고 오른쪽 상단의 설정 저장 버튼을 클릭한다. 꼭 클릭해서 저장!
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDfuSnxvH_lku8nNOtYKeJT1N1H-bM9JAFtHQxrhqxGd3205mMIKS5M1sqTRljg8CYMb4MqfngQ2-9lSnYRlK1UXK3acj_mpBDXBolT8mAzR4zi2NnR8WloYDq_DMPCiWHLaWNU7SFnN8x/s1600/7.png" imageanchor="1"><img border="0" data-original-height="431" data-original-width="1600" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDfuSnxvH_lku8nNOtYKeJT1N1H-bM9JAFtHQxrhqxGd3205mMIKS5M1sqTRljg8CYMb4MqfngQ2-9lSnYRlK1UXK3acj_mpBDXBolT8mAzR4zi2NnR8WloYDq_DMPCiWHLaWNU7SFnN8x/s640/7.png" width="640" /></a>
이제 글쓰기 화면으로 가면 아래와 같이 위에서 저장한 코드가 자동으로 입력되어 있을 것이다. 그 코드 사이에 마크다운 문법을 이용해 글을 작성하면 된다.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZAlNqyvRCNb-Xy8RkEWZsAneqpvIwiX8ZWhySV96N-Jy1AiFAn2ec8PspeSCcX5Q8BFIME7mMQfWeWs4lkUkhIGWO0uHZEsliWDtHYYysSEUuCDcjQzPFQHnfMBXTx5VDZaTXUhK2GM0/s1600/%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA+2020-03-25+%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE+1.57.27.png" imageanchor="1"><img border="0" data-original-height="678" data-original-width="1354" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZAlNqyvRCNb-Xy8RkEWZsAneqpvIwiX8ZWhySV96N-Jy1AiFAn2ec8PspeSCcX5Q8BFIME7mMQfWeWs4lkUkhIGWO0uHZEsliWDtHYYysSEUuCDcjQzPFQHnfMBXTx5VDZaTXUhK2GM0/s640/%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA+2020-03-25+%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE+1.57.27.png" width="640" /></a>
참고 - https://js-react.blogspot.com/2017/01/using-markdown-in-blogger.html
]]>
댓글
댓글 쓰기