본문 바로가기

Django/따라하는 장고

27. 마크다운

질문이나 답변을 작성할 때 일반적인 텍스트 외에 글자를 진하게 표시하거나 링크를 추가하고 싶을 경우 '마크다운' 이라는 글쓰기 도구를 입력하면 표현할 수 있다.

먼저 마크다운의 문법을 간단하게 알아보자.

 

[마크다운 문법]

 

목록을 표시하기 위해 

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

이런식으로 글을 쓸 때 작성하면 위의 문자열을 마크다운 해석기가 HTML로 변환하면 실제 화면에서는 다음과 같이 보인다.

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

 

순서가 있는 목록을 표시하려면

1. 하나
1. 둘
1. 셋

이렇게 글을 작성하면

1. 하나
2. 둘
3. 셋

이런식으로 변환되어 작성된다.

 

작성한 글자를 강조하려면 

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

이런식으로 강조할 텍스트 양쪽에 **을 넣어주면

장고는 파이썬으로 만들어진 웹 프레임워크이다.

 

링크를 추가하려면 [링크명](링크주소) 규칙을 적용하면 된다.

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

라고 작성하면

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

이렇게 변환되어 결과가 나온다.

 

소스코드는 백쿼트 ` 를 3개 연이어 붙여 위아래를 감싸면 된다.

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

이렇게 작성하면

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

이런식으로 변환된다.

 

이제 마크다운 모듈을 설치 해보자.

터미널에 pip install markdown 명령어를 입력하자.

다운이 정상적으로 완료되었다.

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

projects\mysite\pybo\templatetags\pybo_filter.py 에 추가하자.

mark 함수는 markdown 모듈과 mark_safe 함수를 이용해 입력 문자열을 HTML 로 변환하는 필터 함수이다. 마크다운에는 몇 가지 확장 기능이 있는데 파이보는 위처럼 nl2br 과 fenced_code 를 사용했다. nl2br 는 줄바꿈 문자를 <br> 로 바꾸어주고 fenced_code 는 위에서 살펴본 마크다운의 소스코드 표현을 위해 필요하다.

 

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

projects\mysite\templates\pybo\question_detail.html 에 추가하자.

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

 

답변 내용에도 마크다운 필터를 적용하자.

 

이제 테스트해보기 위해 

이렇게 작성을 해 본다면

마크다운 필터에 의해 자동으로 변환되어 작성된다.

'Django > 따라하는 장고' 카테고리의 다른 글

29. 파이보 추가 기능  (0) 2022.11.24
28. 검색 기능  (0) 2022.11.24
26. 앵커  (0) 2022.11.23
25. 추천 기능  (0) 2022.11.23
24. views.py 분리  (0) 2022.11.21