제가 사용한 hELLO Tistory 스킨에 Katex를 적용하는 방법을 공유해 볼까 합니다.
hELLO 스킨에 KaTeX 적용하기
KaTeX 공식 문서에 나와있는 CDN을 티스토리 스킨 편집에서 html head에 넣어봤으나 적용이 됐다 안 됐다 하는 버그가 있었습니다. hELLO 스킨은 alphine.js와 pug로 만들어진 SPA이기 때문에 생긴 버그가 아닐까 추측돼서 스킨에 직접 적용하기로 했습니다.
스킨의 app.pug에 CDN을 넣어봅시다.
모바일 모드에서도 KaTeX 적용하기
위 방법으로 KaTeX를 적용했을 때 모바일 모드(tistory.com/m/)에서는 적용이 안 되는 버그가 있었습니다. 아마 모바일 모드에서는 스킨 적용이 안 돼서 그런 것 같습니다.
저는 블로그 글 안에 스크립트 태그를 직접 삽입하는 방법을 택했습니다. 모바일 모드에서도 글을 불러오면 글 안에 있는 스크립트는 실행될 테니까요.
KaTeX CDN을 서식으로 저장하고 KaTeX가 쓰이는 글을 쓸 때 불러옵니다.
link 태그는 처음 글을 쓸 때는 적용되지만 글을 수정하거나 html모드에서 기본모드로 넘어갈 때 삭제됩니다. 따라서 link태그는 script 태그에서 동적으로 head에 넣어줬습니다.
- 스킨에만 CDN: 모바일에서 적용 안됨
- 글에만 CDN: 웹에서 적용 안됨
- 스킨과 글 모두 CDN: 둘 다 적용됨
웹과 모바일 모두 CDN을 넣은 3번 케이스는 CDN이 중복되어 비효율적이라는 생각이 들었습니다. 스크립트가 중복되어 실행되나 확인하기 위해 글에 콘솔로그를 찍는 스크립트를 추가해 테스트해 봤는데 로그가 모바일에서만 찍히고 웹에서는 찍히지 않았습니다. 모바일에서만 글에 삽입된 스크립트가 실행된다고 생각되어 스킨과 글 모두 CDN을 추가하기로 했습니다.
+ KaTeX Playground
블로그 글을 쓸 때 KaTeX문법을 자주 사용하는데 매번 문법이 맞나 확인하기 위해 미리 보기를 계속 누르는 것이 귀찮아 KaTeX 문법을 쓰고 바로로 확인할 수 있는 KaTeX playground를 만들었습니다. KaTeX를 자주 사용하신다면 한번 사용해 보세요.
+ KaTeX Playground (Update 2023.09.18)
수식 저장, 공유 기능을 추가했습니다.
관련해 블로그에 글을 작성해두었습니다.
'Blog' 카테고리의 다른 글
| hELLO tistory 스킨을 수정해 기본모드에서 부분적으로 마크다운 사용하기 (0) | 2023.08.03 |
|---|
