K

Grad. student in mathematics

관련 커밋: 링크

$\KaTeX$와 MathJax

수학을 주로 사용할 블로그에서 가장 중요한 것은 역시 수식 지원이다. MathJax보다는 $\KaTeX$가 좀 더 $\TeX$ 수식을 네이티브하게 지원하고, 로딩시간도 훨씬 짧다고 해서 $\KaTeX$ 엔진을 사용해보기로 했다.

$\KaTeX$ 설치 (CDN)

$\KaTeX$ 홈페이지로 가서 문서를 읽어보면, 간단히 다음 코드를 삽입하면 CDN을 통해 내 사이트에서 $\KaTeX$을 입력할 수 있는 것으로 안내하고 있다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

이 코드를 _includes/scripts.html에 붙여넣으면 블로그에서 수식 지원이 이뤄진다. 이 코드는 인라인 텍스트에서 $...$을 통해 수식을 입력할 수 있는 기능도 포함하고 있으므로, 이 기능을 원하지 않는다면 마지막 <script>...</script>를 지우면 된다.

다만, 나는 폰트를 설치할 때와 마찬가지로 사이트에 $\KaTeX$를 직접 넣기로 했다. 위의 방법처럼 CDN을 통해 $\KaTeX$을 설치했다면 맨 밑에 기타 설정만 보면 충분하다.

사이트에 $\KaTeX$ 설치

Homebrew 설치

Homebrew는 macOS에서 작동하는 패키지 관리용 어플리케이션이다. Homebrew 홈페이지를 가 보면 설치 방법이 잘 정리되어 있다. 사실 한 줄밖에 없다.

homebrew

홈페이지에서 시키는대로 터미널을 열고, 다음 명령어를 붙여넣으면 Homebrew가 설치된다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrew를 설치하면 이를 통해 여러 프로그램을 설치할 수 있다. 설치를 위해서는 해당 어플리케이션이 Homebrew 패키지 목록에 올라가 있어야 한다. 이는 다음과 같이 확인할 수 있다.

brew search (어플리케이션_이름)

Yarn 설치

$\KaTeX$를 설치하기 위해 필요한 패키지는 Yarn이다. 터미널에

brew install yarn

을 입력하면, Homebrew가 Yarn을 자동으로 설치해준다.

$\KaTeX$ 설치

$\KaTeX$ Github에 들어가서 ZIP 파일을 받자. 그리고 터미널을 열어 다운받은 $\KaTeX$ 폴더로 간다. 해당 폴더에서

yarn

명령어를 통해 관련 파일들을 설치하고, 이후

yarn build

를 통해 빌드한다. 그럼 $\KaTeX$ 폴더 안에 dist폴더가 생긴 것을 볼 수 있는데, 수식입력을 위해 필요한 폴더는 이것 뿐이다. 이 폴더의 내용물을 assets 폴더 등의 적당한 곳에 옮겨두자. 나는 assets/katex로 하위 디렉터리를 만들어 붙여넣었다.

이제 _includes/scripts.html에 들어가서, 맨 위 CDN으로 불러오는 코드를 그대로 넣되, href와 src는 모두 방금 설치한 $\KaTeX$의 해당 파일로 연결해주면 된다. 또, integrity와 crossorigin은 CDN으로 불러올 때 보안을 위해 넣어두는 속성인데, 이제는 내 저장소에서 직접 $\KaTeX$을 로드해오고 있으므로 더 이상 필요없으니 지워도 된다. 따라서 입력할 코드는 다음과 같다.

<link rel="stylesheet" href="/assets/katex/katex.min.css">
<script defer src="/assets/katex/katex.min.js"></script>
<script defer src="/assets/katex/contrib/auto-render.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

기타 설정

_config.yml에 들어가서 # Conversion 항목의 마지막에 다음과 같이 math_engine: katex를 추가해준다.

# Conversion
markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false
math_engine: katex

이렇게 하면 $\KaTeX$이 정상적으로 설치된다. 그러나 아직 조금 수정할 것이 남아있다.

설치 직후에 $\KaTeX$는 다소 글씨가 커서 보기 싫은데, 이는 _sass/minimal-mistakes/_variables.scss 파일에 들어가서 다음의 코드

.katex { font-size: 1em !important; }

를 입력해주면 해결된다. 개인적인 느낌으로는 1em에서 1.1em정도가 적당한 크기였던 것 같다.

또, $\KaTeX$에서 $f’‘$를 입력하면 $\prime$ 기호 대신 따옴표가 출력되는 일이 있다. 이는 한글이나 워드에서

'이것은 인용문이다'

와 같이, 인용문의 앞뒤에 작은 따옴표, 혹은 큰 따옴표를 입력하면 자동으로

‘이것은 인용문이다’

처럼 앞의 따옴표는 여는 따옴표로, 뒤의 따옴표는 닫는 따옴표로 바꿔주는 smart quote 기능이 markdown에서도 사용되어서 그렇다. 이를 해결하는 법은 두 가지가 있다.

  1. $\KaTeX$에서 지원하는 매크로 기능을 이용하여 ‘, ’를 일반적인 apostrophe로 돌려주면 된다. 이를 위해서는 위에서 _scripts.html에 입력한 코드에 
     <script>
     document.addEventListener("DOMContentLoaded", function() {
         renderMathInElement(document.body, {
         // customised options
         // • auto-render specific keys, e.g.:
         delimiters: [
             {left: '$$', right: '$$', display: true},
             {left: '$', right: '$', display: false},
               {left: '\\(', right: '\\)', display: false},
               {left: '\\[', right: '\\]', display: true}
           ],
         macros: {"‘":"'", "’":"'"},
           // • rendering keys, e.g.:
           throwOnError : false
         });
     });
 </script>

    와 같이 macros: {"‘":"'", "’":"'"}를 넣어주면 된다.

  2. 혹은 그냥 smart quote 기능을 꺼버리는 방법도 있다. _config.yml에 들어가서, # Markdown Processing 항목의 아래 
     kramdown:
   input: GFM
   hard_wrap: false
   auto_ids: true
   footnote_nr: 1
   entity_output: as_char
   toc_levels: 1..6
   smart_quotes: ["rdquo", "rsquo", "ldquo", "rdquo"]
   enable_coderay: false

    코드를

     kramdown:
   input: GFM
   hard_wrap: false
   auto_ids: true
   footnote_nr: 1
   entity_output: as_char
   toc_levels: 1..6
   smart_quotes: ["apos", "apos", "quot", "quot"]
   enable_coderay: false

나는 혹시 모르니 $\KaTeX$의 매크로 기능을 사용하기로 했다.

댓글남기기