AiPE
[Html] Tistory에 수식 입력하는 방법 본문
Github쓰기가 어려워서 플랫폼을 굳이 여기로 잡은건데.. 수식입력기가 없다..
코드블럭은 만들어놨으면서 수식입력기는 왜 안만들어놓은지 모르겠다.
결국 구글링해서 "매우 유저 친화적이지 않은" 방법을 찾아냈다.
참고로, Tistory가 제공한 스킨 이외에 유저가 만든 스킨들에서도 정상작동한다.
방법은 크게 2가지가 있다.
- 스킨을 편집해 모든 글에 일괄 적용
- 글의 html을 편집해 해당 글에만 적용
솔직히 수식을 자주 입력하게 되는 사람이라면 스킨 자체를 편집해 모든 글에 일괄 적용해놓는 것이 편리하다. 매번 html을 건드릴 필요 없이 수식을 입력할 수 있다.
다만 "나는 스킨을 건드리는게 싫다"는 사람이나 한 번 수식 입력하고 말거라는 사람은 2번의 방법도 간편하고 괜찮아 보인다.
방법1. 스킨을 편집해 모든 글에 일괄 적용
1. 설정 아이콘 > 블로그 관리 > 스킨 편집 > (이미지 밑에) Html편집
2. 맨 위로 올려서 <head>라고 쓰여있는 부분을 찾는다.
그 밑에있는건 싹 다 건들지 말자.
3. 그 바로 밑에 한줄띄고 아래 코드를 그대로 복사붙여넣기한다.
'여기부터 여기까지가 수식이다'를 표시할 기호를 "백슬래시+괄호" 혹은 "달러사인($) 2개" 중 하나로 선택할 수 있다. 개인적으로는 백슬래시와 괄호의 순서가 헷갈리기 때문에 달러사인이 편한 것 같다.
개인적으로 밑의 두 가지 버전을 둘 다 등록해서 쓰고 있다.
달러사인 버전이 편하긴 한데, 수식을 줄바꿈해 쓰는 게 아니라 문장 내에 수식을 넣고 싶은 경우에는 달러사인 두개 버전이 적합하지 않기 때문.
문장 내에 수식을 넣고 싶으면 백슬래시+괄호 버전을, 한 문장을 통째로 수식으로 넣고 싶으면 달러사인 버전을 쓰는 중이다.
- 백슬래시+괄호 버전
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
- 달러사인 두개 버전
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
들여쓰기나 줄바꿈은 별로 상관 없는 듯 하다.
들여쓰기는 그래도 보기 좋게 <head>와 맞춰놓았다.
4. 이제 수식을 입력하고싶으면 Html에서 인식할수 있는 규격대로 입력해야한다. 이게 매우 문제다.
한글2022 수식입력기가 여태 써본 한글 수식입력기중에 제일 편한데, html과 잘 호환되지는 않는 것 같다.
이 문제는 Tistory 수식입력기를 개발하면서 더 자세히 다룰 예정.
다른 사람들의 추천으로는 아래 사이트에서 입력하는 것이 편하다고 한다.
Equation Editor for online mathematics - create, integrate and download
Download svg gif png pdf emf 5 pt 9 pt 10 pt 12 pt 18 pt 20 pt 50 80 100 110 120 150 200 300 Transparent White Black Red Green Blue Inline Block
editor.codecogs.com
5. 정해진 기호 사이에 수식을 입력한다
(1) 백슬래시+괄호 버전의 경우
복사한 글자를 소괄호() 로 감싼 후 앞의 소괄호 왼쪽에 백슬래시\를 하고 뒤의 소괄호 왼쪽에 \를 한다. "백슬래시+소괄호"가 세트라고 생각하면 편하다.
ex. 내가 쓰고 싶은 수식이 ABCD라면 아래와 같이 쓰면 된다. 백슬래시 대신 ￦기호가 써져도 동일하게 작동한다. (애초에 \와 ￦은 플랫폼마다 다르게 보일지 몰라도 본질적으로 같은 글자이다)
\(ABCD\)
(2) 달러사인 버전의 경우
달러사인은 쉽게 그냥 달러사인 두개 쓰면 된다
ex.
$$ABCD$$
6. 티스토리 화면 하단의 [미리보기]를 눌러 정상작동하는지 확인한다.
방법2. 글의 html을 편집해 해당 글에만 적용
위 방법을 그대로 티스토리 스킨 html이 아니라 "글 작성 > html 모드"를 켜서 하면 된다.
[기본 모드]를 누르면 선택메뉴에 [HTML]이 나오는데, 나온 창의 <head>와 <head> 태그 사이에 똑같은 작업을 해주면 된다.
글을 다 썼는데 왜 티스토리가 수식입력기를 지원하지 않는지 아직도 이해가 안된다.
아니면 수식입력기가 있는데 내가 모르는건가?
시간날때 티스토리 수식 입력기나 만들어서 뿌려야겠다.
'[XiBBaL] Study > Html' 카테고리의 다른 글
| 디스코드 개인 DM 일괄 삭제 방법 (Undiscord 이용) (0) | 2023.02.08 |
|---|
