[파이썬/장고#26] 마크다운기능 - 주요문법 (순서없는목록, 순서있는목록, 강조, 링크, 코드, 인용)

 

 

---

마크다운 문법 알아보기

 

마크다운 문법의 주요 문법을 알아보자. 마크다운 문법은 프로그래밍 문법이 아니라 아주 간단한 텍스트 입력 규칙이다. 또한 마크다운은 블로그, 깃허브 등 많은 사이트에서 사용하는 글쓰기 도구이다. 참고로 마크다운 문법이 원하는 형태로 표시되려면 그 문법을 해석하고 표현하는 해석기를 설치해야 한다. 

 

 

(1단계) 마크다운 문법 - 순서 없는 목록과 순서 있는 목록 표시

 

만약 마크다운으로 작성한 글에 목록을 표시하고 싶다면 다음과 같이 [*]을 입력하고 1칸 띄고 글을 완성하면 된다.

 

* 파이썬
* 장고
* 알고리즘

 

이 마크다운 문서를 해석기가 변환하여 HTML로 만들어 주면 실제 화면에서는 아래와 같이 보인다.

 

[목록화된 결과] 

• 파이썬
• 장고
• 알고리즘

어떤 경우에는 순서가 있는 목록을 표시해야 할 수도 있다. 그런 경우 다음 문법을 사용하면 된다. 이때 입력값을 1. 1. 1.로 똑같이 해도 자동으로 순서를 적용하여 렌더링 한다.

 

1. 하나
1. 둘
1. 셋

 

[순서가 있는 목록화된 결과]

1. 하나
2. 둘
3. 셋

 

 

(2단계) 마크다운 문법 - 강조(볼드) 표시

 

작성한 글자를 강조 표시하려면 강조할 텍스트 양쪽에 [**]를 넣어 감싼다.

 

장고는 **파이썬**으로 만든 웹 프레임워크이다.

 

[강조 표시를 한 결과]

장고는 파이썬으로 만들어진 웹 프로그램이다.

 

 

(3단계) 마크다운 문법 - 링크 표시

 

링크는 대괄호, 소괄호를 이어 쓰면 생성할 수 있다. 대괄호에는 표시할 링크의 이름을 입력하고, 소괄호에는 실제 링크를 입력한다.

 

파이썬 홈페이지는 [http://www.python.org](http://www.python.org)입니다.

 

[링크를 적용한 결과]

파이썬 홈페이지 http://www.python.org 입니다.

 

 

(4단계) 마크다운 문법 - 코드 표시

 

코드는 백쿼드 [`] 3개를 연이어 붙여 위아래로 감싸면 생성할 수 있다. 

 

```
def add(a, b):
    return a+b
```

 

[코드를 표시한 결과]

def add(a, b):

    return a+b

 

 

(5단계) 마크다운 문법 - 인용 표시

 

인용을 표시하려면 다음처럼 [>]를 문장 맨 앞에 입력하고 1칸 띄어쓰기를 한 다음 인용구를 입력한다.

 

> 마크다운은 GitHub에서 사용하는 글쓰기 도구이다.

 

[인용을 표시한 결과]

마크다운은 GitHub에서 사용하는 글쓰기 도구이다. 

 

 

자주 사용하는 마크다운 문법만 알아보았다. 마크다운 문법을 자세히 알고 싶다면 아래 문서를 참고하자.

 

☞ 마크다운 문법 공식 문서: www.markdownguide.org/getting-started

Getting Started | Markdown Guide

 

 

 

 

 

---

게시판(파이보)에 마크다운 기능 추가

 

(1단계) markdown 설치

 

파이보에 마크다운 기능을 추가하려면 pip install markdown 명령어로 마크다운을 설치해야 한다. 

 

(mysite) D:\projects\mysite>pip install markdown Collecting markdown   Downloading Markdown-3.4.1-py3-none-any.whl (93 kB)      ---------------------------------------- 93.3/93.3 kB 5.2 MB/s eta 0:00:00 Installing collected packages: markdown Successfully installed markdown-3.4.1 [notice] A new release of pip available: 22.2.1 -> 22.2.2 [notice] To update, run: python.exe -m pip install --upgrade pip (mysite) D:\projects\mysite>

 

 

(2단계) 마크다운 필터 등록 (pybo_filter.py)

 

마크다운으로 작성한 문서를 HTML 문서로 변환하려면 템플릿에서 사용할 마크다운 필터를 작성해야 한다. 이전에 sub필터를 작성했던 pybo_filter.py 파일에 mark 함수를 추가한다. 

 

# D:\projects\mysite\pybo\templatetags\pybo_filter.py import markdown from django import template from django.utils.safestring import mark_safe register = template.Library() @register.filter def sub(value, arg):     return value - arg @register.filter() def mark(value):     extensions = ["nl2br", "fenced_code"]     return mark_safe(markdown.markdown(value, extensions=extensions))

 

mark 함수는 markdown 모듈과 mark_safe 함수를 이용하여 문자열을 HTML 코드로 변환하여 반환한다. 이 과정을 거치면 마크다운 문법에 맞도록 HTML이 만들어진다. 그리고 markdown 모듈에 "nl2br", "fenced_code" 확장 도구를 설정했다. "nl2br" 은 줄바꿈 문자를 <br> 태그로 바꿔 주므로 [Enter]를 한 번만 눌러도 줄바꿈으로 인식한다. 만약 이 확장 도구를 사용하지 않으면 줄바꿈을 위해 줄 끝에 마크다운 문법인 스페이스를 2개 연속으로 입력해야 할 것이다. "fenced_code"는 마크다운의 소스 코드 표현을 위해 적용했다.

 

☞ 마크다운 확장 기능 문서: python-markdown.gitHub.io/extensions

 

 

(3단계) 질문상세 템플릿에 질문 및 답변 마크다운 적용

 

질문상세 템플릿에 {% load pybo_filter %}을 추가하여 마크다운 필터를 적용하자. 

 

# D:\projects\mysite\templates\pybo\question_detail.html {% extends 'base.html' %} {% load pybo_filter %} {% block content %} <div class="container my-3">     <!-- 사용자 오류 표시 -Start -->     {% if messages %}     <div class="alert alert-danger my-3 role="alert">     {% for message in messages %}         <strong>{{ message.tags }}</strong>         <ul><li>{{ message.message }}</li></ul>     {% endfor %}     </div>     {% endif %}     <!-- 사용자 오류 표시 -End -->     <h2 class="border-bottom py-2">{{ question.subject }}</h2>     <div class="row my-3">         <div class="col-1"> <!-- 추천 영역 -->             <div class="bg-light text-center p-3 border font-weight-bolder mb-1">                 {{ question.voter.count }}             </div>             <a href="#" data-uri="{% url 'pybo:vote_question' question.id %}"                 class="recommend btn btn-sm btn-secondary btn-block my-1">추천</a>         </div>         <div clacss="col-11">             <div class="card">                 <div class="card-body">                     <div class="card-text" "> <!-- style="white-space: pre-line; 삭제 -->                         {{ question.content|mark }}                     </div>                     <div class="d-flex justify-content-end">  (... 생략 ...)     {% for answer in question.answer_set.all %}     <a name="answer_{{answer.id}}"></a>     <div class="row my-3">         <div class="col-1">  <!-- 답변추천 영역 -->             <div class="bg-light  text-center p-3 border font-weight-bolder mb-1">                 {{ answer.voter.count}}             </div>             <a href="#" data-uri="{% url 'pybo:vote_answer' answer.id %}"                class="recommend btn btn-sm btn-secondary btn-block my-1">추천</a>         </div>         <div class="col-11">             <div class="card"> <!-- my-3 삭제 -->                 <div class="card-body">                     <div class="card-text">  <!-- style="white-space: pre-line; 삭제 -->                         {{ answer.content|mark }}                     </div>      (... 생략 ...)

 

기존의 style="white-space: pre-line; 은 삭제하고 {{ question.content|mark }}, {{ answer.content|mark }} 와 같이 마크다운 필터 mark를 적용한다.

 

이제 웹 브라우저에서 어떻게 보이는지 확인해 보자. 아래 내용을 질문 및 답변 글을 작성해 보자.

 

마크다운 기능을 적용해 질문등록

 

마크다운 기능을 적용해 답변 등록

 

 

 

---

여기까지.