Blogger에서 글쓰기 효율을 높이는 Markdown 사용법



- 테마 > HTML 수정 

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi82Z0SXUsQsNPVQ3MnVvP9TkpaaGGVQ4owfGIJgnleXnRGM2MKcYOn1mRRm8q2vtC44ZB6w2dEPlG2dQXKh6TW2PWwQXiPo1G8lLbzwqzq4s6a63IfnmYgTeIFAblIhZm2smQ2FKpLdnfW-p9af2HLuY0t6p8snx02URmz2KlJL0Ddkuc-i_SieVaX/s1600/blog-markdown2.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="Blogger Markdown 예제" border="0" data-original-height="400" data-original-width="532" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi82Z0SXUsQsNPVQ3MnVvP9TkpaaGGVQ4owfGIJgnleXnRGM2MKcYOn1mRRm8q2vtC44ZB6w2dEPlG2dQXKh6TW2PWwQXiPo1G8lLbzwqzq4s6a63IfnmYgTeIFAblIhZm2smQ2FKpLdnfW-p9af2HLuY0t6p8snx02URmz2KlJL0Ddkuc-i_SieVaX/s1600-rw/blog-markdown2.PNG"/></a></div>


---

- Head 에 다음정보를 넣습니다.
<pre class="brush:xml"
class="brush:plain; gutter:true">
	&lt;head&gt;
    	...
   		&lt;!-- 외부 스크립트 로드 --&gt;
   		&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
   		&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js&quot;&gt;&lt;/script&gt;
   		&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js&quot;&gt;&lt;/script&gt;
   		&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
	&lt;/head&gt;
<pre>

---

- Body 내에 아래 코드넣습니다.
<pre class="brush:html">
  &lt;body&gt;
  	...
   	&lt;!-- Markdown 변환 및 하이라이팅 스크립트 --&gt;
   	&lt;script&gt;
	      document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    	     var converter = new showdown.Converter({ 
	            tables: true, 
	            strikethrough: true, 
            	openLinksInNewWindow: true 
         	});

         	// 각 'pre.markdown' 요소를 Markdown 변환
         	document.querySelectorAll(&quot;pre.markdown&quot;).forEach(function (block) {
            	var rawMarkdown = block.innerText;
            	var htmlContent = converter.makeHtml(rawMarkdown);
            
            	// 변환된 HTML을 삽입하고 원래 pre 요소 숨기기
            	var div = document.createElement(&quot;div&quot;);
            	div.className = &quot;markdown-content&quot;;
            	div.innerHTML = htmlContent;
            	block.parentNode.insertBefore(div, block);
            	block.style.display = &quot;none&quot;;
         	});

         	// 하이라이트 적용
         	document.querySelectorAll(&quot;pre code&quot;).forEach(function (block) {
            	hljs.highlightElement(block);
        	 });
      	});
   		&lt;/script&gt;

   		&lt;!-- 추가 CSS: 링크 스타일 명확히 정의 --&gt;
   		&lt;style&gt;
        
         /* 테이블 스타일 */
		 .markdown-content table {
    		width: 100%;
    		border-collapse: collapse;
    		margin-top: 20px;
		 }

		 .markdown-content th, .markdown-content td {
    		border: 1px solid #ddd; /* 테두리 색 */
    		padding: 8px;
    		text-align: left;
		 }

		 .markdown-content th {
    		background-color: #f2f2f2; /* 헤더 배경색 */
    		font-weight: bold;
		 }
        
	      .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 {
	         font-weight: bold;
	         margin-top: 20px;
	      }
    	  .markdown-content p {
	         line-height: 1.6;
	         color: #c7c7c7;
    	  }
	      .markdown-content pre, .markdown-content code {
	         background-color: #333333;
	         padding: 10px;
	         border-radius: 5px;
	         color: #ffffff;
        	 overflow-x: auto;
    	  }
	      .markdown-content a {
         	color: #1a73e8; /* 링크 클릭 가능 색상 */
         	text-decoration: underline;
        	 cursor: pointer;
      	}
      	img, video {
    	     max-width: 100%;
	         height: auto;
      	}
   		&lt;/style&gt;
	&lt;/body&gt;
</pre>

---

- 글 쓸때는 다음과 같이 진행합니다.
- html 모드

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKG9SS40DHH5u1qMa3XfVgUps6yeHA7qTjNTGoBZc5WkfCd_0-5gEE7JDvRZozi2yt_kWXHPNYd_U-1BoLaO1gbLJbYP1sTvwqLrx9R2H4H6_vVUBei26wXendhbFdnN8gGVWZFtSgH0mGWYK9NQr-Xox5BNWy7EYMU3dFmo1ENd2vlzQRM4xy0k4/s1600/blog-markdown.PNG" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="244" data-original-width="754" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKG9SS40DHH5u1qMa3XfVgUps6yeHA7qTjNTGoBZc5WkfCd_0-5gEE7JDvRZozi2yt_kWXHPNYd_U-1BoLaO1gbLJbYP1sTvwqLrx9R2H4H6_vVUBei26wXendhbFdnN8gGVWZFtSgH0mGWYK9NQr-Xox5BNWy7EYMU3dFmo1ENd2vlzQRM4xy0k4/s1600-rw/blog-markdown.PNG"/></a></div>

---

- 본문에 아래포맷 필요
- Body에 아래 젛보 넣습니다.
<pre class="brush:html"
class="brush:plain; gutter:true">
   <!-- 변환할 Markdown 콘텐츠 -->
   &lt;pre class=&quot;markdown&quot;&gt;
		# 제목
		이곳에 Markdown 형식으로 작성된 콘텐츠가 들어갑니다. [여기 링크](https://example.com) 확인
   &lt;/pre&gt;
</pre>


---

## 예제 및 동작 (Markdown syntax guide)

```
## Headers

# This is a Heading h1
## This is a Heading h2
###### This is a Heading h6
```

## Headers

# This is a Heading h1
## This is a Heading h2
###### This is a Heading h6


---

## Emphasis

```
*This text will be italic*  
_This will also be italic_

**This text will be bold**  
__This will also be bold__

_You **can** combine them_
```

*This text will be italic*  
_This will also be italic_

**This text will be bold**  
__This will also be bold__

_You **can** combine them_

---

## Lists
```
### Unordered

* Item 1
* Item 2
* Item 2a
* Item 2b

### Ordered

1. Item 1
2. Item 2
3. Item 3
    1. Item 3a
    2. Item 3b
```

### Unordered

* Item 1
* Item 2
* Item 2a
* Item 2b

### Ordered

1. Item 1
2. Item 2
3. Item 3
    1. Item 3a
    2. Item 3b

---

## Images
```
![This is an alt text.](/image/sample.webp "This is a sample image.")
```

![This is an alt text.](/image/sample.webp "This is a sample image.")

---

## Links

```
You may be using [Markdown Live Preview](https://markdownlivepreview.com/).
```

You may be using [Markdown Live Preview](https://markdownlivepreview.com/).

---

## Blockquotes

```
> Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.
>
>> Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
```

> Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.
>
>> Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

---


## Tables

```
| Left columns  | Right columns |
| ------------- |:-------------:|
| left foo      | right foo     |
| left bar      | right bar     |
| left baz      | right baz     |
```

| Left columns  | Right columns |
| ------------- |:-------------:|
| left foo      | right foo     |
| left bar      | right bar     |
| left baz      | right baz     |


---

## Blocks of code
````
```
let message = 'Hello world';
alert(message);
```
````

```
let message = 'Hello world';
alert(message);
```

---

## Inline code

```
This web site is using `markedjs/marked`.
```

This web site is using `markedjs/marked`.

---

<!-- 목록을 표시할 HTML 컨테이너 -->
<div>
    <h3>Related Links</h3>
    <ul id="label-post-list">
        <!-- 여기에 '주식' 라벨의 게시물 목록이 추가됩니다 -->
    </ul>
</div>



댓글

이 블로그의 인기 게시물

윤석열 계엄령 선포! 방산주 대폭발? 관련주 투자 전략 완벽 분석

대통령 퇴진운동 관련주: 방송·통신·촛불수혜주 완벽 분석

키움 OPEN API MFC 개발 (1)