[Django] 마크다운 문법(사용) & 설치 & 적용 방법

마크다운 문법(사용 방법)

1) 순서 없는 목록 표시

* 가나다
* 마바사
* 아자차

 

-> result

· 가나다
· 마바사
· 아자차

 

 

 

2) 순서 있는 목록 표시

# 임의의 숫자 아무거나 통일시키면 됨
2. Angel
2. Player`s
2. Blog

 

-> result

1. Angel
2. Player`s
3. Blog

 

 

 

3) 강조

이 페이지는 **AngelPlayer**의 블로그입니다.

 

-> result

이 페이지는 AngelPlayer의 블로그입니다.

 

 

 

4) 하이퍼링크

# [이동 주소](하이퍼링크가 걸릴 문단)
현재 블로그 주소는 [angelplayer.tistory.com](angelplayer.tistory.com)입니다.

 

-> result

현재 블로그 주소는 angelplayer.tistory.com입니다.

 

 

 

5) 코드 표시

5-1) 기본 markdowm을 이용하여 표기

```
<div>
    <p>hello world!</p>
    <p style="color:#124daf">hi django<p>
<div>
```

 

-> result

<div>
    <p>hello world!</p>
    <p style="color:#124daf">hi django<p>
<div>

 

 

 

5-2) colorscripter (권장, 외부 사이트 사용하여 업로드)

https://colorscripter.com/

Color Scripter

<!-- 작성 완료 후 'html 코드로 복사'를 클릭하여 나온 코드를 글 또는 댓글에 작성 -->
<div class="colorscripter-code" style="color:#010101;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important; position:relative !important;overflow:auto"><table class="colorscripter-code-table" style="margin:0;padding:0;border:none;background-color:#fafafa;border-radius:4px;" cellspacing="0" cellpadding="0"><tr><td style="padding:6px;border-right:2px solid #e5e5e5"><div style="margin:0;padding:0;word-break:normal;text-align:right;color:#666;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="line-height:130%">1</div><div style="line-height:130%">2</div><div style="line-height:130%">3</div><div style="line-height:130%">4</div></div></td><td style="padding:6px 0;text-align:left"><div style="margin:0;padding:0;color:#010101;font-family:Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;line-height:130%"><div style="padding:0 6px; white-space:pre; line-height:130%">&lt;div&gt;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;hello&nbsp;world!&lt;/p&gt;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;style="color:#124daf"&gt;hi&nbsp;django&lt;p&gt;</div><div style="padding:0 6px; white-space:pre; line-height:130%">&lt;div&gt;</div></div><div style="text-align:right;margin-top:-13px;margin-right:5px;font-size:9px;font-style:italic"><a href="http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter</a></div></td><td style="vertical-align:bottom;padding:0 2px 4px 0"><a href="http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white"><span style="font-size:9px;word-break:normal;background-color:#e5e5e5;color:white;border-radius:10px;padding:1px">cs</span></a></td></tr></table></div>

 

-> result

<div>
    <p>hello world!</p>
    <p style="color:#124daf">hi django<p>
<div>

 

 

5-3) Github Gist를 이용 (권장, 깃허브 로그인 필요)

https://gist.github.com/

Discover gists

 

gist에서 코드를 입력 후 [Create Gist]를 통해 나온 결과물의 [Embed]링크를 복사하여 글 또는 댓글에 붙여넣기

 

-> result

 

 

 

 

 

※) 기타 문법

https://www.markdownguide.org/basic-syntax/

Basic Syntax | Markdown Guide

 

 

 

마크다운 설치

// ativate(가상 환경) 상태에서 설치
>>> pip install markdown

 

 

 

마크다운 적용

# filter.py

import markdown
from django.utils.safestring import mark_safe


@register.filter()
def mark(value):
	extensions = ["nl2br", "fenced_code"]
	return mark_safe(markdown.markdown(value, extensions=extensions))

 

# 실제 적용할 파일
{% load filter %}
    ...
    <p>적용할문장:mark</p>
    ...