구글블로그 MarkDown 사용하기 (CSS 변경하기)

날짜: 

# __구글블로그 MarkDown 사용하기 (CSS 변경하기)__

안녕하세요 __물먹고하자__ 입니다 :)
최근에 업무가 코드레벨적이 아니라 정책적인 업무를 많이 하고 있어서
Swift 코드 관련 글을 못올리고 있었습니다. (게임도 같이 했음)

최근에 다시 코드관련 글을 올릴려고 하는데, 구글블로그에 코드를 같이 삽입하기가 생각보다 불편합니다.
글쓰는 양식을 좀 바꿔보려고 MarkDown 지원방법을 찾게 되었습니다.

예전에 처음 시작했던 네이버 블로그에서는 코드블락, 에드센스가 없어서 구글블로그로 왔는데,
정리하면서 조금은 깔끔하게 나왔으면 하는 바램이 있었습니다.

최근에 블로그 관련된 사이트 들이 늘으면서 __[Velog](https://velog.io/)__로 샘플 글들을 써봤는데
__Markdown__을 사용해서 깔끔하게 정리되는 것을 보고 구글블로그에 __Markdown__ 지원되는걸 찾아보게 되었습니다. 

>참고 : [Google Blogger 에서 Markdown 사용하기](https://velog.io/@jay2u8809/Google-Blogger-%EC%97%90%EC%84%9C-Markdown-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)
마크다운 사용문법 : [마크다운 사용참고](https://gist.github.com/ihoneymon/652be052a0727ad59601)

---
## 1. __구글블로그 HTML 편집화면 이동__

> MarkDown을 지원하려면 CSS 삽입이 필요합니다. 아래 경로로 이동합니다.
💡사이드 메뉴 - 테마 - 맞춤설정의 화살표 - __HTML 편집__ 클릭

<!-- 1번 이미지 (테마, 맞춤설정 부분) -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgp9LM1j6kALAKjQ2u_9Px_-UtPJPgRr3EIAK5r_TtroC1aqTxg7nCZyWqQE1TkXfWo7MEad7d8Tu8JWYF0_YCc7f5Q51uDkI-Z91D5TuC7gXoO0vP2p39T7xp-QK0DKlZs61cXWPERxpe2rkk-LWeW1AQRz5N74bqb8vK2f-ecj27eyqYZY5LTW2q_xDU/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20205652.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1070" data-original-width="1273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgp9LM1j6kALAKjQ2u_9Px_-UtPJPgRr3EIAK5r_TtroC1aqTxg7nCZyWqQE1TkXfWo7MEad7d8Tu8JWYF0_YCc7f5Q51uDkI-Z91D5TuC7gXoO0vP2p39T7xp-QK0DKlZs61cXWPERxpe2rkk-LWeW1AQRz5N74bqb8vK2f-ecj27eyqYZY5LTW2q_xDU/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20205652.png"/></a></div>

<!-- 2번 이미지 (HTML 편집) -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmU-PFEA5YCYWYTZ3PwCa78W9n2Sh6wlmQ7M8pQWQxtj6LyfSJVNOz8QZfnRFL2RcB8fvoCs-6oesypjYzp8ic-0lMDPptelR4Eo7PrUUB6_bmt2jJSSE7u5kjjXRorEkca_C8AQcUCPlIcHndWHiF3dH3_Yxh9mukvmKUk66vXAhhXjVVaiQ1Ju6MS0pp/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20205741.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="392" data-original-width="411" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmU-PFEA5YCYWYTZ3PwCa78W9n2Sh6wlmQ7M8pQWQxtj6LyfSJVNOz8QZfnRFL2RcB8fvoCs-6oesypjYzp8ic-0lMDPptelR4Eo7PrUUB6_bmt2jJSSE7u5kjjXRorEkca_C8AQcUCPlIcHndWHiF3dH3_Yxh9mukvmKUk66vXAhhXjVVaiQ1Ju6MS0pp/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20205741.png"/></a></div>

---
## 2. __MarkDown CSS 삽입하기__
> __css__ : head 제일 아래위치 붙여 넣어준다. 
__js__ : body 제일 아래위치에 붙여 넣어준다. 
```html
<head>
   ...
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css"/>
</head>
```
```html
<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>
</body>
```
여기까지만 따라하시면 MarkDown 지원 됩니다! 👏

---
## 3. __MarkDown 테스트__
MarkDown 사용부분은 [마크다운 사용참고](https://gist.github.com/ihoneymon/652be052a0727ad59601) 참고하시면 도움이 될 것 같습니다.
[실험용 블로그 글](https://xodhks0113.blogspot.com/2024/11/blog-post.html)

구글 블로그에서 MarkDown으로 글을쓰실때 __HTML보기__에서 진행해주시고,
시작을 아래처럼 작성해서 시작하시면! 적용이 됩니다.

```html
<pre class="markdown">
<xmp>
   ... 여기에 Markdown 문법으로 작성 ...
<!--/xmp--> <-- Code 블락에 해당 코드 넣으니 표현이 안되내요
<!--/pre--> <-- ! 빼고 사용하셔야합니다.
```


여기까지 적용한 상태에서 확인해보니 __인용구, 테이블__ 부분 맘에 들지 않게 표현되고 있는걸 확인했습니다. 😢

## 인용구 테스트
> BlockQuote 테스트
두번째줄
세번째줄

## 테이블 테스트

| 왼쪽 | 가운데 | 오른쪽 |
| :-------- | :--------: | --------: |
| 테이블 | 구분기호 | 사용 |
| 내용 설명 | 마크다운 | 정렬 |
| 문법 | 외우세요 | 사용방법 |

<!-- 3번 이미지 (CSS 추가 변경전) -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3H7QTE19CyHEBj8G1jWXMopaYDGXEvIJe_DyH-2wd2lP-nQDLLMYCVH5o1xqWP0LFsQZxywZkpjy6wSGpU513dCv4-SAQP2KrSYPtWQPPM-S7cHtLBG02N0GpGa9GqcbOyjb0Ko1NwRC5X14XRcDIFQ7BpLxloAKsPY27oXR1Gpti6my4C5pMmsSkXDPy/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20213004.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="846" data-original-width="1203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3H7QTE19CyHEBj8G1jWXMopaYDGXEvIJe_DyH-2wd2lP-nQDLLMYCVH5o1xqWP0LFsQZxywZkpjy6wSGpU513dCv4-SAQP2KrSYPtWQPPM-S7cHtLBG02N0GpGa9GqcbOyjb0Ko1NwRC5X14XRcDIFQ7BpLxloAKsPY27oXR1Gpti6my4C5pMmsSkXDPy/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20213004.png"/></a></div>

>💡blockQuote, table 부분의 CSS 부분이 구글테마에 의한건지 위의 이미지 처럼 노출됨

---
## 4. __blockQuote, table CSS 바꾸기__
>💡(다시)사이드 메뉴 - 테마 - 맞춤설정의 화살표 - __HTML 편집__ 이동
* blockQuote, table 관련 CSS 삽입하기 (위치는 눈치껏💫)
* 사실 정확히 몰라서 CSS 몰려있는 위치에 주석달고 추가했습니다.
* 추가 CSS는 샘플 구하고, 제 블로그에 맞게 일부 수정했습니다.

<!-- 4번 이미지 (CSS 추가코드) -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUF2W1HhKVDik4MnU3MY_-POqYkMzy38Q0bVy04SosgihQKWfDvZddcSmh50_j1f80Xc9xA7NUdbM6jtyQGyI6UsWpUggcM2FTXaTrTaBVPG8Hh8FYWP4nfAQzTBa6KlVbe_Sm2HsJvToRZMAeDGEvAjx4DHrAgMVR8ZWCuZUfhflw7WecBUoeQqjhBaLa/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20213320.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1044" data-original-width="588" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUF2W1HhKVDik4MnU3MY_-POqYkMzy38Q0bVy04SosgihQKWfDvZddcSmh50_j1f80Xc9xA7NUdbM6jtyQGyI6UsWpUggcM2FTXaTrTaBVPG8Hh8FYWP4nfAQzTBa6KlVbe_Sm2HsJvToRZMAeDGEvAjx4DHrAgMVR8ZWCuZUfhflw7WecBUoeQqjhBaLa/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20213320.png"/></a></div>

```css
blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
 
  /*Font*/
  font-size: 16px;
  line-height: 2.0;
  color: #666;
  text-align: left;
  font-style: normal;
 
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
 
  /*Borders - (Optional)*/
  border-left-style: solid;
  border-left-width: 15px;
  border-right-style: solid;
  border-right-width: 2px;
}
/* MARKDOWN blockquote CSS JIWOOK (end) */
/* MARKDOWN Table CSS JIWOOK (start)*/
table{
    margin: 20px auto;
    width: 100%;
    border-spacing:0;
    border-collapse: collapse;
    background-color: #fff;
}
@media only screen and (min-width: 768px) {
    table {
        margin: 30px auto;
    }
}
@media only screen and (min-width: 1024px) {
    table {
        max-width: 80%;
    }
}
@media only screen and (min-width: 1220px) {
    table {
        margin: 40px auto;
        max-width: 75%;
    }
}
@media only screen and (min-width: 1600px) {
    table {
        max-width: 70%;
    }
}
.table-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
}
table {
    min-width: 200px;
    border: 2px solid #2a2f36;
}
table thead {
    background: #2a2f36;
    color: #fff;
    text-align: left;
    font-weight: 600;
}
table thead th {
    font-weight: 600;
}
table td,
table th {
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
}
@media only screen and (min-width: 768px) {
    table td,
    table th {
        padding: 15px;
    }
}
@media only screen and (min-width: 1220px) {
    table td,
    table th {
        padding: 20px;
    }
}
table tr:nth-child(2n) {
    background: #f5f7fa;
}
/* MARKDOWN Table JIWOOK (end) */
```
### CSS 적용후 이미지
<!-- 5번 이미지 (CSS 추가 변경후) -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj70Yp4o1z6a6gegYaMBjagLGhelpe8lWTxRhtqHEDaoVWuYhQy3bPGamDnuOzbwX6PRWg9hYMMBn3ifCxeKoiC5sWw3s3g_LLndyK7R2q_5t9fo6IeODQpXuwxU842itqzmLT5oF7TSYUkw848wAipYBMhkcsKpKfS0C7AaTcjdfhXqPgrHjdpx-AjsBl3/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20213254.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1147" data-original-width="1207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj70Yp4o1z6a6gegYaMBjagLGhelpe8lWTxRhtqHEDaoVWuYhQy3bPGamDnuOzbwX6PRWg9hYMMBn3ifCxeKoiC5sWw3s3g_LLndyK7R2q_5t9fo6IeODQpXuwxU842itqzmLT5oF7TSYUkw848wAipYBMhkcsKpKfS0C7AaTcjdfhXqPgrHjdpx-AjsBl3/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20213254.png"/></a></div>

## 5. 글쓰기 팁
> 💡MarkDown으로 글쓸때 프리뷰 문제가 있어서 저는 페이지 2개 띄워놓고 글썼습니다.

<!-- 6번 이미지 (글쓰기 팁 이미지) -->
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg10WJcx57SJUljo6qGyZJi3j2ore6Zw3cIDeEZHH422Us2yxSzSnTW-i4Hs4ZD2U5cGta4MsurjbjvzPbGw73YJwBUOvZqgmDgxV_x8F5pO_-ZQ8Ps3l-mkiN5W20ehXJxYKq5mLLuqDbAQ-rzc7r707WtDlvv8ySCxWQqIGx2kChc4l3QO6UpOenknb8-/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20220509.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="1358" data-original-width="2558" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg10WJcx57SJUljo6qGyZJi3j2ore6Zw3cIDeEZHH422Us2yxSzSnTW-i4Hs4ZD2U5cGta4MsurjbjvzPbGw73YJwBUOvZqgmDgxV_x8F5pO_-ZQ8Ps3l-mkiN5W20ehXJxYKq5mLLuqDbAQ-rzc7r707WtDlvv8ySCxWQqIGx2kChc4l3QO6UpOenknb8-/s1600/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202024-11-19%20220509.png"/></a></div>

---
## __마무리__
최근에 업무가 코드적인게 아닌 정책적인 업무를 많이 하다보니 코드베이스보단 스트레스 업무를 많이 하게되서 블로그에 소홀하게 작성했던것 같습니다.
다시 글을 써보려고 하니 __Git에서 코드 Script 복사해서 넣는 행위__는 다시는 하고 싶지 않더라구요.

최근 iOS에 Markdown 지원도 알아보고 있기도 하고, velog, gitio 에서 Markdown 베이스로 작업을 하다보니 굳이 블로그를 옮겨서 쓰는것보다 여기에 적용을 해보자! 했는데, 생각보다 적용이 잘된것 같아 기쁩니다. (스팩업!!)

집에 놀고 있는 게이밍 PC는 블로그 쓰는 용도로 바꿔야겠습니다.

오늘은 이만!

즐거운 코딩되세요~

끝.

댓글

댓글 쓰기