Django Markdownx에서 Pygments 사용하여 코드 하이라이팅 하기, 테마 바꾸기, 모서리 둥글게 하기
Oct. 24, 2021, 4 p.m.
Django에서 마크다운을 사용해서 블로그 같이 글을 작성하거나 할 때 markdownx 라는 Django 익스텐션을 사용하면 정말 편리합니다. 제공하는 에디터에서 마크다운 문법을 사용해서 글자, html 요소들을 집어넣고 사진도 드래그만 하면 쉽게 넣을 수 있기 때문이죠.
마크다운으로 글을 작성하다 보면 프로그래밍 코드를 넣어야 하는 경우도 많습니다. 이때 코드 하이라이팅을 하면 좀 더 보기 쉽고 예쁘게 글을 작성할 수 있는데요, 다양한 방법이 있지만 markdownx의 익스텐션 중 하나인 CodeHilite를 사용하면 쉽게 코드 하이라이팅을 할 수 있답니다. 이번 포스트에서는 markdownx에서 CodeHilite를 사용하여 Pygments를 적용하여 코드 하이라이팅을 하고 또한 테마도 바꾸는 방법을 소개하겠습니다.
1. Pygments 설치
Pygments는 작성된 코드를 지정된 테마 css 파일을 적용하여 하이라이팅 된 html 문서로 바꾸어 주는 python 라이브러리 입니다. markdownx에서 CodeHilite를 사용할 때 Pygments를 사용하여 하이라이팅 할 수 있는데요, 먼저 설치 해보겠습니다.
$ pip install Pygments
간단하게 설치가 완료되었을 겁니다.
2. settings.py 에서 사용 설정
Pygments가 설치 되었다면 Django 프로젝트의 settings.py 에서 사용 설정을 해주어야 합니다. settings.py 에 들어가서 아래와 같이 추가해주세요.
-settings.py-
...
MARKDOWNX_MARKDOWN_EXTENSIONS = [
'markdown.extensions.codehilite',
'markdown.extensions.fenced_code',
'markdown.extensions.extra',
'markdown.extensions.toc'
]
MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS = {
'markdown.extensions.codehilite': {
'linenums': False,
'use_pygments': True,
'noclasses': True,
}
}
보시면 먼저 markdownx의 extension중에서 codehilite와 fenced_code 등을 사용하겠다고 선언을 해주었습니다.
그 다음 codehilite의 상세 설정을 해주었는데요, linenums는 코드를 표시할 때 줄 번호를 표시 할 것인지를 설정하는 부분입니다. 저는 깔끔함을 위해서 False로 설정했습니다.
use_pygments는 Pygments 라이브러리를 사용해서 코드 하이라이팅을 할 것인지를 정합니다. True로 설정해주세요.
noclasses는 코드 하이라이팅 된 html를 만들 때 inline으로 스타일 설정을 할 것인지 class를 사용하여 스타일 설정을 할 것인지 정합니다. True로 설정하는 것이 안전합니다.
추가적인 설정을 더 할 수 있는데요, 자세한 내용은 아래의 공식 문서를 확인하세요.
https://python-markdown.github.io/extensions/code_hilite/
설정이 완료되었습니다.
3. 에디터에서 사용하기
설정이 완료되었으니 이제 markdownx 에디터에서 사용할 수 있습니다! 코드 블럭은 ```로 감싸면 됩니다. 또한 코드블럭이 시작할때 뒤에 코드의 언어를 명시해주면 그 언어에 맞는 하이라이팅을 지원합니다. 명시해주지 않으면 Pygments가 자동으로 언어를 예측해서 하이라이팅을 해줍니다. 예를 들어 python언어로 작성한 코드를 사용할 때는 아래와 같이 작성합니다.
```python
def delete_comment(request, pk):
comment = get_object_or_404(Comment, pk=pk)
post = comment.post
if request.user.is_authenticated and request.user == comment.author:
comment.delete()
return redirect(post.get_absolute_url())
else:
raise PermissionDenied
```
그러면 아래처럼 코드 하이라이팅이 된 모습을 볼 수 있을 것입니다.
def delete_comment(request, pk):
comment = get_object_or_404(Comment, pk=pk)
post = comment.post
if request.user.is_authenticated and request.user == comment.author:
comment.delete()
return redirect(post.get_absolute_url())
else:
raise PermissionDenied
그런데 아마 처음 CodeHilite를 설정했다면 테마가 기본테마로 설정되어 위와같은 테마가 아닌 회색 배경에 코드가 작성되어 있을 것입니다. 모서리도 둥글지 않구요. 이것은 테마 설정과 css를 추가하여 바꿀 수 있습니다!
4. Pygments 테마 바꾸기, 코드 블럭 모서리 둥글게 하기
저는 코드를 작성할 때 어두운 테마를 사용하는 것을 좋아합니다. 제 블로그 디자인도 그렇고 흰색 배경에 검은색 코드블럭이 잘 어울린다고 생각하기 때문이에요. 이와같이 테마를 바꾸려면 settings.py에서 테마 설정을 해주어야 합니다.
그럼 Pygments에는 어떤 테마들이 있을 까요? 먼저 알아보고 마음에 드는 테마를 적용해 보도록 하겠습니다.
위의 페이지는 Pygments의 데모 페이지 입니다. Language를 설정하고 Style을 바꾸어 가면서 결과를 확인하세요. 저는 native 스타일이 제일 마음에 들었습니다.
마음에 드는 테마를 찾았다면 적용해주도록 하겠습니다. settings.py에 들어가서 수정해줍시다.
-settings.py-
...
MARKDOWNX_MARKDOWN_EXTENSION_CONFIGS = {
'markdown.extensions.codehilite': {
'linenums': False,
'use_pygments': True,
'noclasses': True,
'pygments_style': 'native',
}
}
pygments_style를 통해 style을 native로 설정해주었네요. 스타일을 바꾸려면 noclasses를 꼭 True로 해주어야 한다는 사실을 명심하세요.
저장하고 다시 작성한 코드를 보면 테마가 바뀌어 있을 것입니다.
그런데 뭔가 이상하지 않나요? 배경이 어두운 테마를 사용하게 되면 프로그래밍 코드에 해당되지 않는 주석과 같은 글자들이 안보이는 경우가 있습니다.
Pygment에서 그런 글자들을 인식하지 못하고 기본 글자색인 검은색으로 표현했기 때문이죠. 또한 코드 블럭 모서리가 각져서 보기 안예쁘기도 합니다. css를 추가해서 바꾸어 보도록 하죠. css파일을 하나 작성하거나 html파일 안에 sytle태그를 이용해 밑의 코드를 추가해주세요.
code {
color:#bbbbbb !important; background: #202020 !important;
}
.codehilite{
border-radius: .35rem !important; padding-right: .25rem !important; padding-left: .25rem !important; margin-bottom: .25rem !important;
}
Pygments에서 인식되지 않은 글자들은 code태그에 담깁니다. code태그 안의 글자색을 !important 를 이용해 무조건 흰색으로 작성되도록 하고 배경은 검은색이 되도록 합니다.(native테마에 맞는 색을 사용하였습니다.)
그다음 codehilite 클래스가 적용된 코드 블럭에 border-radius 설정을 통해 둥글게 만들어 줍니다.
이 스타일을 적용하게 되면 이제 제 블로그에 적용된 것 같이 검은 코드 테마에 테두리가 둥근 코드 하이라이팅 블럭을 사용할 수 있게 됩니다!!
Django Markdownx CodeHilite Pygments