구글 블로거에서 마크다운 사용하는 방법 (How to use markdown in Google Blogger) 



## 구글 블로거에서 마크다운 사용하는 방법

구글 블로거를 쓰면서 불편했던 부분이 코드 편집의 어려움이었다. 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>

그 다음 설정 =&gt; 글, 댓글 및 공유에 들어가 "추가" 버튼을 클릭한다. 

<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

댓글

댓글 쓰기

이 블로그의 인기 게시물

부트스트랩 사용 시 버튼 오른쪽 정렬하는 방법 (How to use float-right for right align in bootstrap)

Bootstrap 사용 시 버튼을 오른쪽 정렬하는 방법 버튼 클래스에 float-right 해준다. 예시) Bootstrap v4.0 <div class = "row" > <div class = "col-12" > One <input type = "button" class = "btn float-right" value = "test" ></div> <div class = "col-12" > Two <input type = "button" class = "btn float-right" value = "test" ></div> </div> 참고 링크 https://getbootstrap.com/docs/4.0/utilities/float/#responsive https://stackoverflow.com/questions/15446189/how-can-i-get-my-twitter-bootstrap-buttons-to-right-align
자세한 내용 보기

맥(Mac)에서 MySql 사용 시 Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 오류가 발생하는 경우 해결 방법

## 맥(Mac)에서 MySql 사용 시 Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 오류가 발생하는 경우 해결 방법 mysql 사용 시 간혹 Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 라는 오류를 마주하게 될 때가 있다. mysql 이 비정상적으로 종료를 하게 되면 나타나는 현상이라고 하는데 어떻게 해결해야 하는지 알아봅니다. 저의 경우는 아래와 같이 2줄을 해당 프로젝트 폴더 위치에서 터미널을 실행하면 해결이 되었습니다. ```shell brew services stop mysql brew services start mysql ``` 그 다음 해결이 되었는지 확인할 때 아래와 같이 확인하고, 비밀번호를 입력합니다. ```shell mysql -u root -p ``` 비밀번호 설정이 되어있지 않은 경우 아래와 같이해도 무방합니다. ```shell mysql ``` 참고: https://postitforhooney.tistory.com/entry/MACDBError-Cant-connect-to-local-MySQL-server-through-socket-tmpmysqlsock-2 [PostIT]
자세한 내용 보기

HTML, CSS - footer fixed (foot 하단 고정 시키기)

이미지
footer fixed 꽤나 자주 쓰이는 부분인데 항상 할 때 마다 애를 먹었다. 그래서 기억해두려고 한다. 하단 푸터가 스크롤과 상관없이 계속 밑에 고정이 되어있게 하는 방법 ! How to fix footer location(bottom) HTML < footer > footer fix </ footer > CSS footer { position : fixed ; left : 0 px ; bottom : 0 px ; height : 60 px ; width : 100% ; background : grey ; color : white ; } Result
자세한 내용 보기