[Django] 점프 투 장고 튜토리얼 - 3-14 마크다운

Django 점프 투 장고 정리

작성일 : 2021-11-25

문서버전 : 1.0 

개요

이 문서는 점프 투 장고 사이트의 장고 튜토리얼 학습 내용을 정리한 내용입니다.

레퍼런스

점프 투 장고 https://wikidocs.net/72242

3-14 마크다운

작성하는 텍스트에 마크다운 기능을 적용해보자. 마크다운은 웹 사이트에서 글쓰기를 할 때 heading, quote 기능 등을 쉽게 쓸 수 있도록 도와주는 글쓰기 도구다.

 

마크다운은 문법이 있는데 문법은 여기서 생략하겠다. 문법은 구글링해보면 쉽게 정보를 찾을 수 있다.

 

마크다운 설치

마크다운 기능을 추가하기 위해 마크다운 모듈을 설치해주자.

(mysite) c:\projects\mysite>pip install markdown Collecting markdown   Using cached Markdown-3.2.1-py2.py3-none-any.whl (88 kB) Requirement already satisfied: setuptools>=36 in c:\venvs\mysite\lib\site-packages (from markdown) (41.2.0) Installing collected packages: markdown Successfully installed markdown-3.2.1

 

마크다운 필터 등록

템플릿에서 사용할 마크다운 필터를 작성해주어야 한다. 마크다운으로 작성한 문서를 HTML으로 변환해주기 위함이다. 이전에 Sub 필터를 작성했던 pybo_filter.py 파일에 mark 필터도 주가해주자.

> ../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는 마크다운의 소스코드 표현을 위해 필요한 기능이다.

 

마크다운 적용

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

> ../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를 적용시켰다.

> ../mysite/templates/pybo/question_detail.html

(... 생략 ...)

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

(... 생략 ...)

아래 답변 내용도 마크다운 필터를 적용해주었다.

 

확인해보니 정상적으로 잘 나타나는 것으로 보인다.