티스토리 개발 블로그 셋팅

일반적으로 개발 블로그라고 해봤자 별건 없지만, 개인적으로 자주 쓰거나 좋아하는 라이브러리들을 추가해 놓고 자랑을 하면 개발자 블로그 다운느낌이 살아난다.

 

일단, 신택스 하이라이팅 부분부터 보자. 일반적으로 티스토리에서 제공하는 신택스 하이라이팅은 메이저 언어를 잘 지원해주고, 마크다운 데이터와도 잘 어울려서 그렇게 바꾸고 싶은 느낌은 없어서 일단 신택스 하이라이팅은 이대로 간다. Bash shell script가 지원 안 되는 건 정말 아쉽지만, 이 부분은 뭐... 어쩔 수 없다고 본다. (아마도 나중에 다른 라이브러리를 쓰지 않을까 싶다. SyntaxHighlighter를 예전 블로그에서 사용했었는데, 여차하면 이걸로 넘어갈 수 있을 수 있다.)

import something-good
print("Hell o world!")
print("kill me plz")

LaTeX을 가끔 쓸 일이 있기 때문에, MathJax를 설정한다. LaTeX 문법을 다 지원 안하는 걸로 알고 있지만, 그래도 문제는 없다. 일반적으로 행렬이나 간단한 대수학 관련된 부분 (ML이나 통계 다룰 때 써야할 듯) 위주로 적기 편하다.

다음의 코드를 헤더에 추가하자

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Mermaid를 설정한다. Dot/GraphViz의 상위 호환버전이다. 일반적으로 시퀀스 다이어그램 쓸 대 좋다.

<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

 

sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

 

좀 복잡하긴 하지만 다음과 같은 시퀀스 다이어그램 같은 걸 넣을 수 있다. 의외로 네트워크 관련 설명하기 편해진다 이러면.

 

 

chart.xkcd의 경우 취향이긴 하지만, 일단 블로그 글 작성할 때 좋아서 추가한다.

<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>

 

 

대부분의 설정은 끝났다. 이제 블로그 생활을 즐겨보자. :)