#27 마크다운(Markdown)

#27 마크다운(Markdown)

일반적인 블로그 등에서 글을 작성할 때 텍스트를 진하게 표시하거나 하이퍼링크를 추가하거나 글머리 기호를 추가하는 등 다양한 시각효과를 줄 수 있다. 물론 마크업(Markup) 언어인 HTML을 이용해서도 가능한 일이지만 마크다운

이라는 마크업 언어의 경량버전 언어를 사용하면 보다 간단하게 텍스트를 원하는 형태로 표현할 수 있다. 블로그 외에도 Github 와 같은 많은 웹사이트들이 마크다운 문법을 사용한 글쓰기를 지원한다.

1. 마크다운 문법

Pybo에 마크다운을 통한 글쓰기 기능을 추가하기에 앞서 마크다운 문법에 대해 간단하게 알아보자.

① 리스트

말그대로 어떤 항목들의 목록을 나타내기 위해 사용된다.

* 항목 1 * 항목 2 * 항목 3

이와 같은 방식으로 작성할 수 있으며

실제 웹페이지에선 위와 같은 형태로 표시된다.

② 순서 리스트

리스트와 동일하지만 항목들의 순서를 나타낼 필요가 있는 경우 사용한다.

1. 항목 1 1. 항목 2 1. 항목 3

이와 같은 방식으로 작성할 수 있으며

실제 웹페이지에선 위와 같은 형태로 표시된다.

③ 강조

특정 텍스트를 강조표시하기 위해 사용한다.

일반텍스트 **강조할 텍스트** 일반텍스트

이와 같은 방식으로 작성할 수 있으며

실제 웹페이지에선 위와 같은 형태로 표시된다.

④ 링크

텍스트에 하이퍼링크를 추가할 때 사용한다.

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

이와 같은 방식으로 작성할 수 있으며

실제 웹페이지에선 위와 같은 형태로 표시된다.

⑤ 소스코드

코드블럭을 만들어 그 안에 소스코드를 표현할 때 사용한다.

``` def python(): print('HelloPython') ```

이와 같은 방식으로 작성할 수 있으며

실제 웹페이지에선 위와 같은 형태로 표시된다.

⑥ 인용

인용을 표시할 떄 사용한다.

> 인용할 내용

이와 같은 방식으로 작성할 수 있으며

실제 웹페이지에선 위와 같은 형태로 표시된다.

마크다운의 문법은 이 외에도 다양하지만 더 자세한 내용에 대해서는 마크다운 문법 공식문서를 참조하자.

2. 마크다운 설치

마크다운의 문법에 대해 간단히 알아보았으니 이제 Pybo에 마크다운 기능을 적용할 차례이다. 먼저 터미널에서

아래 명령어를 실행하여 마크다운 모듈을 설치하자.

pip install markdown

성공적으로 설치된 것을 확인할 수 있다.

3. 마크다운 필터 등록

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

이전 페이징의 구현을 위해 만들었던 pybo_filter.py 에서 markdown 모듈과 django.utils.safestring 의 mark_safe 함수를

import 한다. 그리고 mark 필터를 위와같이 작성하여 등록한다. extensions 에는 마크다운 문법으로 글을 작성할 때

개행 시 공백문자를 두번 입력할 필요가 없도록 하기 위해 nl2br을, 마크다운 코드 표현을 위해 fenced_code를 넣어준다.

mark다운 모듈과 mark_safe 함수를 사용하여 입력받은 마크다운 코드를 해석하고 이를 HTML 코드로 변환한다.

question_detail.html 의 두 번째 라인에서 필터를 로드해준다.

그리고 아래쪽의 게시글 내용을 표시하는 코드를 위와 같이 수정하여 mark 필터를 적용하여 출력되도록 한다.

답글에도 마찬가지로 적용해준다.

4. 마크다운 적용 확인

이제 마크다운 필터 적용이 정상적으로 이루어졌는지 확인하기 위해 테스트를 해본다.

다른 것들은 잘 적용이 되지만 코드블럭과 인용 부분은 스타일이 적용되지 않아 적용된것이 확실히 보이지 않는 것을

볼 수 있다.

static 디렉토리의 style.css 에서 pre 태그와 blockquote 태그에 대한 스타일을 수정해준다.

이제 코드블럭과 인용 부분이 적용된 것을 쉽게 확인할 수 있다.

from http://scala0114.tistory.com/115 by ccl(A) rewrite - 2021-10-11 19:26:57