안녕하세요! STEMentor팀 팀장 김성훈입니다~!
크롬(Chrome)을 이용하시는 분들 중, 블로그 글의 수식이 깨져 보이는 현상에 관해 해결 방법을 알려 드리겠습니다.
# 원인
현재 STEMentor 블로그는 Readiz님의 FastBoot 스킨을 이용중이며 수식 렌더링을 위해 MathJax 스크립트를 사용하고 있습니다. 그런데 크롬에서 STEMentor 블로그에 들어올 경우 Web font를 불러들이는 과정에서 문제가 있어 이미지로 대체하고 있습니다. 이 과정에서 크롬은 HTML/CSS 방식이 아닌 SVG 방식의 이미지만 지원을 하여 수식이 압축되어 보이는 문제가 생기고 있습니다.
수식 압축 현상
# 해결 방법
문제의 해결 방법은 수식의 렌더링 방식을 변경해 주면 됩니다. 수식에 마우스를 대고 우클릭을 하면 다음과 같이 메뉴가 보일 것입니다. 그러면 아래와 같이 Math Settings -> Math Rendering 에서 HTML-CSS가 선택되어 있는 것을 보실 수 있습니다.
수식 오류 해결 방법
여기서 HTML-CSS를 SVG로 바꿔 주시면 수식이 정상적으로 렌더링 되는 것을 보실 수 있습니다.
SVG 선택
수식이 정상적으로 렌더링 된 모습
# 마치며
지금까지 STEMentor 블로그 수식 오류 해결 방법에 대해 알아보았습니다.
혹시 STEMentor 블로그 이용에 불편함이 있으시다면 댓글로 달아주신다면 적극적으로 개선해 나가도록 하겠습니다.
지금까지 STEMentor팀 팀장 김성훈이었습니다.
감사합니다.