[Django] 장고(Django) 서비스 개발 - 마크다운(Markdown)

이번 포스팅에서는 장고를 사용하여 게시판 서비스 개발에 필요한 마크다운(Markdown)에 대하여 공부를 해보고자 한다.

 

---

마크다운 설치

마크다운 기능을 추가하려면 마크다운 모듈을 설치해야 한다.

다음처럼 pip install markdown으로 마크다운을 설치한다.

(mysite) c:\projects\mysite>pip install markdown
Collecting markdown
    Downloading Markdown-3.4.1-py3-none-any.whl (93 kB)

Installing collected packages: markdown
Successfully installed markdown-3.4.1

 

---

마크다운 필터 등록

마크다운으로 작성한 문서를 HTML 문서로 변환하려면 템플릿에서 사용할 마크다운 필터를 작성해야 한다.

이전에 sub 필터를 작성했던 pybo_filter.py 파일에 다음과 같이 mark 필터를 추가한다.

 

파일명: 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로 변환하는 필터 함수이다.

마크다운에는 몇 가지 확장 기능이 있는데 위처럼 nl2br과 fenced_code를 사용하도록 설정했다. 

 

nl2br은 줄 바꿈 문자를 <br> 로 바꾸어 준다. 

fenced_code는 위에서 살펴본 마크다운의 소스코드 표현을 위해 필요하다.

nl2br을 사용하지 않을 경우 줄 바꿈을 하기 위해서는 줄 끝에 스페이스(' ')를 두 개 연속으로 입력해야 한다.

 

마크다운의 더 많은 확장 기능은 다음 문서를 참고한다.

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

 

---

마크다운 적용

이제 질문 상세 템플릿에 {% load pybo_filter %} 태그를 추가하고 마크다운 필터를 적용해 보자.

 

[파일명: projects\mysite\templates\pybo\question_detail.html]

{% extends 'base.html' %}
{% load pybo_filter %}
{% block content %}
<div class="container my-3">
(... 생략 ...)
<div class="card-text" style="white-space: pre-line;">{{ question.content|mark }}</div>
(... 생략 ...)

 

줄 바꿈을 표시하기 위해 사용했던 기존의 style="white-space: pre-line;" 스타일은 삭제하고 {{ question.content|mark }}와 같이 마크다운 필터 mark를 적용했다.

마찬가지로 답변 내용에도 다음처럼 마크다운 필터를 적용한다.

 

[파일명: projects\mysite\templates\pybo\question_detail.html]

(... 생략 ...)
<div class="card-text" style="white-space: pre-line;">{{ answer.content|mark }}</div>
(... 생략 ...)

 

---

마크다운 확인

이제 질문 또는 답변을 마크다운 문법으로 작성하면 브라우저에서 어떻게 보이는지 확인해 보려 한다.

 

다음 내용으로 글을 작성한다.

**마크다운 문법으로 작성해 봅니다.**

* 리스트1
* 리스트2
* 리스트3

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

 

위와 같이 마크다운 문법으로 작성한 글은 이제 다음과 같이 보인다.

 

마크다운 문법을 몰라도 simplemde와 같은 마크다운 UI 도구를 설치하면 마크다운을 쉽게 사용할 수 있다.

 

---