구글 블로거에서 마크다운 사용하는 방법 (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
자세한 내용 보기

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
자세한 내용 보기

AWS Lambda + CloudWatch 를 이용해 주기적으로 AWS RDS 중지, 시작하는 방법(How to stop and start AWS RDS periodically using AWS Lambda + CloudWatch)

이미지
## AWS Lambda + CloudWatch 를 이용해 주기적으로 AWS RDS 중지, 시작하는 방법(How to stop and start AWS RDS periodically using AWS Lambda + CloudWatch) 가끔씩 사용하는 **AWS EC2 + RDS** 가 있다. 그래서 평소에는 중지해놓고, 필요할 때만 실행시키고 싶은데 **RDS** 가 문제다. 왜 그런지는 모르겠는데~~(AWS가 돈을 많이 벌고 싶어서 인 것 같은데... 왜 그런지 아시는 분은 알려주세요...)~~ 중지 후 7일마다 스스로 시작이 된다. 그래서 깜빡하고 나면 비싸도 너무 비싼 RDS 요금이 왕창 나온다. 그래서 매 주 미리 알림을 맞춰놓고, 콘솔에 들어가 중지를 하는데 가끔씩 까먹기도 하고, 너무 귀찮기도 해서 나를 대신할 방법을 찾아봤다. 크게 방법이 2가지 있는데, 아래와 같다. 1. [AWS Instance Scheduler](https://aws.amazon.com/ko/solutions/implementations/instance-scheduler/) 를 이용하는 방법 2. AWS Lambda + CloudWatch 를 이용하는 방법 그런데 검색해보니 1번 방법은 적어도 5달러 이상 나올 것 같아서, 2번 방법으로 시도해봤다.~~(내 돈은 아니지만 5달러도 아까ㅇ...)~~ 서두가 길었는데, 이제 AWS Lambda + CloudWatch 를 이용해 주기적으로 AWS RDS 중지, 시작하는 방법을 알아보자. ### AWS Lambda + CloudWatch 설정 먼저 크게 1. AWS Lambda 설정 2. IAM 정책 설정, 3. CloudWatch 설정 순으로 나눠서 설정해보자. #### 1. AWS Lambda 설정 AWS 계정은 있다고 가정하고, AWS에 로그인하고 들어가 서비스에서 **AWS Lambda** 를 클릭한다. 그 다음 **함수 생성**을 클릭. **새로 작성** 을 선택하고(그대...
자세한 내용 보기