Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (kevin13@chol.net)
홈페이지
첨부 파일
 

HTML에서 수학 관련 기호/수식을 표현하기 위한 방법 - MathJax.js - 두번째 이야기

지난 번 글을 쓸 때만 해도,

HTML에서 수학 관련 기호/수식을 표현하기 위한 방법 - MathJax.js
; http://www.sysnet.pe.kr/2/0/1718

MathJax가 Preview 버전 상태였는데, 어느새 정식으로 릴리즈되었습니다. ^^

MathJax
; https://www.mathjax.org/

여러분의 HTML에서 이를 사용하는 방법은 2개로 나뉩니다. 가장 쉬운 방법은, 그냥 여러분의 HTML에 다음과 같은 스크립트만 명시해 주면 됩니다.

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>

CDN을 못 믿겠다거나, 어쨌든 로컬 리소스로 모두 들고 있기를 원하는 경우라면 다음의 파일을 다운로드 받아서,

MathJax-master.zip
; https://github.com/mathjax/MathJax/archive/master.zip

다음의 리소스들을 여러분들의 웹 사이트에 포함시키면 됩니다.

/MathJax.js 파일
    /config 폴더
    /extensions 폴더
    /fonts 폴더
    /jax 폴더

그런데, 사용 방법이 살짝 바뀌었습니다. 기존에는 <span /> 태그의 mathjax-preview로도 잘 표현이 되었던 것 같은데요... 지금도 잘 되긴 하지만 문제가 있습니다. 예를 들어 다음과 같이 <span />으로 묶는 경우,
<span>\begin{pmatrix}n \\ k \end{pmatrix} = \begin{cases} \begin{pmatrix}n - 1 \\ k - 1 \end{pmatrix} + \begin{pmatrix}n - 1 \\ k \end{pmatrix} &\mbox { if } 0 < k < n \\ 1 &\mbox { if } \: k = 0 \: or \: k = n \end{cases}
</span>

이렇게 개행이 되어 3줄에 걸쳐 표현됩니다.

\begin{pmatrix}n \\ k \end{pmatrix} = \begin{cases} \begin{pmatrix}n - 1 \\ k - 1 \end{pmatrix} + \begin{pmatrix}n - 1 \\ k \end{pmatrix} &\mbox { if } 0 < k < n \\ 1 &\mbox { if } \: k = 0 \: or \: k = n \end{cases}


따라서 <script /> 태그로만 묶어주어야,

<script type="math/tex">
    \begin{pmatrix}n \\ k \end{pmatrix} = \begin{cases} \begin{pmatrix}n - 1 \\ k - 1 \end{pmatrix} + \begin{pmatrix}n - 1 \\ k \end{pmatrix} &\mbox { if } 0 < k < n \\ 1 &\mbox { if } \: k = 0 \: or \: k = n \end{cases}
</script>

이렇게 잘 보여집니다. ^^



참고로, Lex 형식 뿐만 아니라 MathML 형식도 함께 지원합니다.




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]





[최초 등록일: ]
[최종 수정일: 5/14/2018 ]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:kevin13@chol.com

비밀번호

댓글 쓴 사람
 



2016-08-13 06시24분
정성태
2017-07-31 12시23분
정성태
2018-05-14 01시16분
mathjax 배포 주소가 2017년 4월 이후 바뀌었습니다.

Using a Content Delivery Network (CDN)
; http://docs.mathjax.org/en/latest/start.html


따라서 다음과 같은 식의 cdn을 써야 합니다.

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js


정성태

[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
11658정성태8/18/20185사물인터넷: 31. 커패시터와 RC 회로파일 다운로드3
11657정성태8/18/201810사물인터넷: 30. 릴레이(Relay) 제어파일 다운로드3
11656정성태8/18/201831사물인터넷: 29. 트랜지스터와 병렬로 연결한 LED파일 다운로드1
11655정성태8/18/201826사물인터넷: 28. 저항과 병렬로 연결한 LED파일 다운로드1
11654정성태8/18/201844사물인터넷: 27. 병렬 회로의 저항, 전압 및 전류파일 다운로드1
11653정성태8/18/201828사물인터넷: 26. 입력 전압에 따른 LED의 전압/저항 변화파일 다운로드1
11652정성태8/18/201834사물인터넷: 25. 컬렉터 9V, 베이스에 5V와 3.3V 전압으로 테스트하는 C1815 트랜지스터파일 다운로드1
11651정성태8/18/201846사물인터넷: 24. 9V 전압에서 테스트하는 C1815 트랜지스터파일 다운로드2
11650정성태8/18/201842사물인터넷: 23. 가변저항으로 분압파일 다운로드1
11649정성태8/14/201869사물인터넷: 22. 저항에 따른 전류 테스트파일 다운로드1
11648정성태8/14/201878사물인터넷: 21. 퓨즈를 이용한 회로 보호파일 다운로드3
11647정성태8/8/2018145오류 유형: 476. 음수의 음수는 여전히 음수가 되는 수(절대값이 음수인 수)
11646정성태8/8/201877오류 유형: 475. gacutil.exe 실행 시 "Failure initializing gacutil" 오류 발생
11645정성태8/8/201887오류 유형: 474. 닷넷 COM+ - Failed to load the runtime.
11644정성태8/8/2018171디버깅 기술: 119. windbg - 닷넷 개발자를 위한 MEX Debugging Extension 소개
11643정성태8/12/2018172사물인터넷: 20. 아두이노 레오나르도 R3 호환 보드의 3.3v 핀의 LED 전압/전류 테스트 [1]파일 다운로드1
11642정성태8/3/201899Graphics: 19. Unity - LightMode의 ForwardBase에 따른 _WorldSpaceLightPos0 값 변화
11641정성태8/3/2018135Graphics: 18. Unity로 실습하는 Shader (10) - 빌보드 구현파일 다운로드1
11640정성태8/3/2018117Graphics: 17. Unity - World matrix(unity_ObjectToWorld)로부터 Position, Rotation, Scale 값을 복원하는 방법파일 다운로드1
11639정성태8/2/2018135디버깅 기술: 118. windbg - 덤프 파일로부터 추출한 DLL을 참조하는 방법
11638정성태8/2/2018202오류 유형: 473. windbg - 덤프 파일로부터 추출한 DLL 참조 시 "Resolved file has a bad image, no metadata, or is otherwise inaccessible." 빌드 오류
11637정성태8/1/2018113Graphics: 16. Unity - World matrix(unity_ObjectToWorld)로부터 TRS(이동/회전/크기) 행렬로 복원하는 방법파일 다운로드1
11636정성태8/1/2018114Graphics: 15. 3D 공간에서 두 점이 이루는 각도 구하기파일 다운로드1
11635정성태8/1/2018101오류 유형: 472. C# 컴파일 오류 - Your project is not referencing the ".NETFramework,Version=v3.5" framework.
11634정성태8/1/2018140.NET Framework: 790. .NET Thread 상태가 Cooperative일 때 GC hang 현상 재현 방법파일 다운로드1
[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...