2024. 12. 11. 10:51ㆍTrouble Shootings/Web
1. 마크다운 수학 표시 기호를 사용하고 싶다!
티스토리에서 글을 작성할 때 MathJax를 사용하여 수학 기호를 게시글에서 표현하였습니다. 그런데, 사용할 때마다 늘 아래와 같은 기호로 묶어야 해서 불편했죠.
\( y = f(x) \)
마크다운(Markdown) 문법에 익숙했던 저는 `$` 기호 하나로만 양 옆에 묶어서 사용하고 싶었습니다. 그래서 이와 관련된 설정을 할 수 없을까 싶어 MathJax 공식 문서를 찾아보았는데, 방법이 있었네요. (이때까지 노가다로 수학 기호 표기했던 저에게 박수..)
2. 필요한 추가 설정
구글에 "티스토리 수학 기호 사용법"이라고 검색하면 수많은 블로그에서 이에 대해 잘 설명해주고 계십니다. 대부분의 글들이 다음과 같이, 티스토리 스킨 편집에서 HTML `<head>` 블록 사이에 다음 구절을 추가하기만 하면 된다는 내용들이었지요.
<!-- MathJax 수학 기호를 사용하기 위한 script -->
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<!-- Polyfill 이전 브라우저 버전(ex. IE 11)과의 호환성을 위한 script -->
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6">
</script>
`tex-mml-chtml.js` 파일에는 MathJax에서 사용 가능한 다양한 옵션에 대한 기본 설정이 포함되어 있다고 합니다. 그 중에서, 인라인 수학 구분 기호를 `$`로 설정하려면 아래와 같이 명시적으로 MathJax에 알려줘야 한다고 하네요. (🔗Configuring MathJax)
<!-- 인라인 수학 구분 기호 설정 -->
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
이전까지 작성했었던 수학 관련 게시글들을 다시 다 수정해야 하나 고민했는데, 다행히 수학 구분 기호를 여러 개 줄 수 있나 보네요. 주의할 점으로는 위 설정 변수를 기존에 MathJax 구성 요소 파일을 로드하는 스크립트 앞에 배치해놔야 한다는 것입니다.
<!-- 인라인 수학 구분 기호 설정 -->
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
<!-- MathJax 수학 기호를 사용하기 위한 script -->
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<!-- Polyfill 이전 브라우저 버전(ex. IE 11)과의 호환성을 위한 script -->
<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6">
</script>
결론은 위 코드를 티스토리 스킨 편집 HTML `<head>` 태그 사이에 넣어주세요!
3. 테스트 해 보기
일단 제가 하고 싶었던 건 마크다운 문법처럼 `$` 기호로 수학 기호를 표현하는 것이니 그것부터 해보겠습니다.
$ y = f(x) $
$ y = f(x) $ 👉🏻 인라인 기호이니 이렇게 한 줄에 같이 작성하는 게 가능할 겁니다. 잘 작동하네요! 이번에는 원래 기존에 사용했었던 방법으로 해보겠습니다.
\( y = f(x) \)
\( y = f(x) \) 👉🏻 이것 또한 인라인 기호이니 이렇게 한 줄에 작성하는 게 가능합니다. 참고로 블록 단위로 수학 기호를 작성하려면 `$$`으로 양 옆을 묶으시면 됩니다.
$$ y = f(x) $$
$$ y = f(x) $$ 👉🏻 이건 한 줄을 다 차지하기 때문에 이렇게 옆에 같이 글 작성하는 게 불가능합니다.