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

어드민 유저 권한 시스템 설계(Admin user authority system design)

이미지
## 어드민 유저 권한 시스템 설계 ### 문제 상황 - 현재 어드민 페이지 권한 종류가 [전체 읽기/쓰기], [전체 읽기] 밖에 없음 - 전체 읽기 - 다 읽을 수 있음 - 전체 읽기/쓰기 - 다 수정, 삭제할 수 있음 - 어드민 페이지를 이용해야하는 사람은 많음 - 어드민 페이지를 이용하려면 admin 권한을 줄 수 밖에 없는 상황. 그런데 admin 권한이 너무 큼 ### 요구사항 - 기존 권한 시스템을 최대한 가지고 가면서, 필요한 권한만 부여할 수 있는 권한 시스템을 도입해야 함 ### 설계 - 구성 - 유저, 스코프, 메소드로 구성되어있음 - 유저(사용자) - 스코프(기능 또는 페이지 단위) - 어드민 특정 기능 또는 페이지 단위 - 메소드(API 주소) - EX) api::route::get::/api/product/string:oid - 유저는 스코프를 갖고, 스코프는 메소드를 갖고 있음 - 유저는 스코프 리스트, 스코프는 메소드(요청 가능한 API)의 리스트를 가지고 있음 - 유저에게 스코프 할당을 보다 편하게 하기 위해 자주 사용되는 스코프를 preset 으로 묶음
자세한 내용 보기