수학 관련 포스팅을 위해 수식을 티스토리에 어떻게 넣을 수 있을 지 찾아봤습니다.
크게 두가지 방법으로, 수식을 이미지로 넣거나 latex를 이용하여 쓰는 것 같은데 전자는 수정이 필요할 때마다 새로 만들어야하는 번거로움이 있어 후자를 택했습니다.
하지만 티스토리는 기본적으로 latex를 지원하지 않습니다. 때문에 별도로 티스토리 스킨 html의 <head> 태그에 CDN으로 MathJax.js를 불러와야 합니다. 그래서 구글에 검색해서 코드를 찾아 넣었는데, 페이지 로드 중 랜덤으로 latex 문법이 정상적으로 랜더링 되지 않는 오류가 발생 하는 것이었습니다. 그래서 아래와 같이 수정해보았습니다:
<script>
document.addEventListener('DOMContentLoaded', () => {
window.MathJax = {
loader: { load: ['[tex]/color'] },
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
packages: { '[+]': ['color'] }
},
options: {
enableMenu: false
}
};
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
script.async = true;
document.head.appendChild(script);
});
</script>정확한 원인을 조사해보진 않았으나 아마 비동기적으로 요소들을 불러오는 티스토리 특성상, 모든 요소가 로드되기 전에 MathJax가 랜더링을 시도하는 것이 문제라 생각했습니다. 따라서 모든 DOM이 준비 되었을 때 MathJax의 config을 설정하고, CDN을 불러오게끔 설정했습니다. 또한 검색해서 찾은 예시 코드의 대부분은 MathJax2.x 버전을 사용 중이 었기 때문에 MathJax3 버전을 사용하게끔 업데이트 했습니다.
추가로 Options는 수식을 우클릭하면 나타나는 MathJax 메뉴를 표시할 지 여부에 대한 것인데, 제 게시글의 수식들을 누가 복사해 갈 것 같진 않아 그냥 페이지가 깔끔해지도록 비활성화 했습니다. 또, latex 수식에 색을 입히기 위해 color extension을 추가하였습니다.
수학 관련 포스팅을 위해 수식을 티스토리에 어떻게 넣을 수 있을 지 찾아봤습니다.
크게 두가지 방법으로, 수식을 이미지로 넣거나 latex를 이용하여 쓰는 것 같은데 전자는 수정이 필요할 때마다 새로 만들어야하는 번거로움이 있어 후자를 택했습니다.
하지만 티스토리는 기본적으로 latex를 지원하지 않습니다. 때문에 별도로 티스토리 스킨 html의 <head> 태그에 CDN으로 MathJax.js를 불러와야 합니다. 그래서 구글에 검색해서 코드를 찾아 넣었는데, 페이지 로드 중 랜덤으로 latex 문법이 정상적으로 랜더링 되지 않는 오류가 발생 하는 것이었습니다. 그래서 아래와 같이 수정해보았습니다:
<script>
document.addEventListener('DOMContentLoaded', () => {
window.MathJax = {
loader: { load: ['[tex]/color'] },
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
packages: { '[+]': ['color'] }
},
options: {
enableMenu: false
}
};
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
script.async = true;
document.head.appendChild(script);
});
</script>정확한 원인을 조사해보진 않았으나 아마 비동기적으로 요소들을 불러오는 티스토리 특성상, 모든 요소가 로드되기 전에 MathJax가 랜더링을 시도하는 것이 문제라 생각했습니다. 따라서 모든 DOM이 준비 되었을 때 MathJax의 config을 설정하고, CDN을 불러오게끔 설정했습니다. 또한 검색해서 찾은 예시 코드의 대부분은 MathJax2.x 버전을 사용 중이 었기 때문에 MathJax3 버전을 사용하게끔 업데이트 했습니다.
추가로 Options는 수식을 우클릭하면 나타나는 MathJax 메뉴를 표시할 지 여부에 대한 것인데, 제 게시글의 수식들을 누가 복사해 갈 것 같진 않아 그냥 페이지가 깔끔해지도록 비활성화 했습니다. 또, latex 수식에 색을 입히기 위해 color extension을 추가하였습니다.
