블로그에서 코드 블록과 목록의 포맷을 유지하는 완벽한 가이드

블로그에서 코드 블록과 목록의 포맷을 유지하는 완벽한 가이드

 

블로그에 코드 블록을 붙여넣을 때, 특히 목록과 함께 사용하는 경우 포맷이 깨지거나 번호가 잘못 적용되는 문제가 발생할 수 있습니다. 이 글에서는 마크다운을 사용하는 블로그 편집기에서 코드 블록과 목록의 포맷을 유지하는 여러 방법을 다룹니다. 마크다운 문법, HTML 태그, 플러그인, 그리고 들여쓰기와 빈 줄을 적절히 사용하는 방법을 통해 이 문제를 해결할 수 있는 다양한 팁을 제공하겠습니다.

 

1. 마크다운(Markdown) 사용

많은 블로그 플랫폼이 마크다운을 지원하며, 이를 통해 코드 블록의 포맷을 깨지 않게 유지할 수 있습니다. 코드 블록을 만들려면 백틱(```) 세 개로 코드 앞뒤를 감싸면 됩니다.

예시:

markdown

```python
def hello_world():
    print("Hello, World!")
```

이 방법을 사용하면 블로그에 코드를 복사해 넣을 때 흑백 배경의 코드 블록 포맷이 유지됩니다.

 

2. HTML 태그 사용

블로그 편집기가 HTML을 지원하는 경우, <pre>와 <code> 태그를 사용하여 코드 블록을 작성할 수 있습니다. 이 방법은 특히 WYSIWYG 편집기에서 유용하며, 포맷이 흐트러지지 않습니다.

html

<pre><code>
def hello_world():
    print("Hello, World!")
</code></pre>

3. 블로그 편집기의 코드 블록 기능 사용

대부분의 블로그 편집기에는 "Insert Code" 또는 코드 블록 삽입 기능이 내장되어 있습니다. 이 기능을 사용하면 코드 블록 포맷이 제대로 유지됩니다. 블로그 플랫폼에서 제공하는 이 기능을 이용해, 깔끔한 코드 블록을 만들 수 있습니다.

 

4. 플러그인 사용

WordPress나 기타 CMS에서 사용 가능한 플러그인을 설치하면 코드 블록의 포맷을 유지하는 데 도움이 됩니다. 예를 들어, SyntaxHighlighter 플러그인이나 Code Snippets 도구는 코드에 적절한 스타일을 추가해줍니다.

 

5. CSS로 스타일 지정

블로그 편집기가 HTML/CSS를 지원하는 경우, 코드 블록에 특정 스타일을 적용할 수 있습니다. 이를 통해 코드 블록의 배경색이나 글자색을 설정할 수 있습니다.

html

<pre style="background-color: black; color: white; padding: 10px;">
def hello_world():
    print("Hello, World!")
</pre>

---

반응형

 

728x90

코드 블록과 목록을 함께 사용할 때 발생하는 문제 해결

1. 들여쓰기 규칙 준수

마크다운에서 목록과 코드 블록을 함께 사용할 때는 코드 블록 앞에 적절한 들여쓰기를 추가해야 합니다. 각 목록 항목에 해당하는 코드 블록 앞에 4개의 공백 또는 탭을 사용하여 들여쓰기 하면 목록과 코드 블록이 명확히 구분됩니다.

예시:

markdown

1. 첫 번째 항목입니다.

    ```python
    def hello_world():
        print("Hello, World!")
    ```

2. 두 번째 항목입니다.

이 방법을 사용하면 목록 번호가 코드 앞에 붙지 않고, 각 항목이 깔끔하게 구분됩니다.

 

2. 빈 줄 삽입

목록과 코드 블록을 명확히 구분하려면 코드 블록 앞뒤에 빈 줄을 추가하여, 목록이 코드 블록을 항목의 일부로 간주하지 않게 할 수 있습니다.

markdown

1. 첫 번째 항목입니다.

    ```python
    def hello_world():
        print("Hello, World!")
    ```

2. 두 번째 항목입니다.

3. 번호가 붙지 않는 목록 만들기

목록에서 코드 블록에 번호가 붙지 않도록 하려면, HTML 주석(<!-- -->)을 사용해 목록과 코드 블록 사이에 빈 줄을 삽입할 수 있습니다. 이를 통해 코드 블록이 목록의 일부가 아닌 독립된 항목으로 인식됩니다.

 

4. 문법 강조 플러그인 사용

일부 블로그 플랫폼은 마크다운 목록과 코드 블록을 제대로 처리하지 못할 때가 있습니다. 이때 GFM(GitHub Flavored Markdown)을 지원하는 문법 강조 플러그인이나 마크다운 확장 기능을 사용하는 것도 좋은 해결책입니다.

---

결론

마크다운에서 코드 블록과 목록을 함께 사용할 때 포맷이 깨지는 문제는 흔히 발생하는 일이지만, 들여쓰기와 빈 줄을 적절히 사용하거나 마크다운 형식, HTML 태그, 편집기의 코드 블록 기능을 통해 쉽게 해결할 수 있습니다. 블로그에 따라 맞춤형 솔루션을 적용해, 코드 포맷을 완벽하게 유지하면서 깔끔한 문서를 작성해보세요.