Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
 
(연관된 글이 2개 있습니다.)

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

지난번 글을 쓸 때만 해도,

HTML에서 수학 관련 기호/수식을 표현하기 위한 방법 - MathJax.js
; https://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 형식도 함께 지원합니다.




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

[연관 글]






[최초 등록일: ]
[최종 수정일: 6/26/2021]

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

비밀번호

댓글 작성자
 



2016-08-13 06시24분
정성태
2017-07-31 12시23분
정성태
2019-07-06 11시28분
Escaping ‘$’ in MathJax
; https://blogueun.wordpress.com/2014/01/04/escaping-in-mathjax/

<span class="tex2jax_ignore">$</span>
정성태
2019-07-06 11시28분
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.5/MathJax.js
정성태
2023-12-11 08시49분
lukas-blecher/LaTeX-OCR
 - pix2tex: Using a ViT to convert images of equations into LaTeX code.
; https://github.com/lukas-blecher/LaTeX-OCR
정성태

... 106  107  108  [109]  110  111  112  113  114  115  116  117  118  119  120  ...
NoWriterDateCnt.TitleFile(s)
11236정성태7/4/201727416.NET Framework: 662. C# - VHD/VHDX 가상 디스크를 마운트하지 않고 파일을 복사하는 방법파일 다운로드1
11235정성태6/29/201721678Math: 20. Matlab/Octave로 Gram-Schmidt 정규 직교 집합 구하는 방법
11234정성태6/29/201719298오류 유형: 404. SharePoint 2013 설치 과정에서 "The username is invalid The account must be a valid domain account" 오류 발생
11233정성태6/28/201719194오류 유형: 403. SharePoint Server 2013을 Windows Server 2016에 설치할 때 .NET 4.5 설치 오류 발생
11232정성태6/28/201720064Windows: 144. Windows Server 2016에 Windows Identity Extensions을 설치하는 방법
11231정성태6/28/201719707디버깅 기술: 86. windbg의 mscordacwks DLL 로드 문제 - 세 번째 이야기 [1]
11230정성태6/28/201719170제니퍼 .NET: 26. 제니퍼 닷넷 적용 사례 (6) - 잦은 Recycle 문제
11229정성태6/27/201720718오류 유형: 402. Windows Server Backup 관리 콘솔이 없어진 경우
11228정성태6/26/201717806개발 환경 구성: 320. Visual Basic .NET 프로젝트에서 내장 Manifest 자원을 EXE 파일로부터 제거하는 방법파일 다운로드1
11227정성태6/19/201726505개발 환경 구성: 319. windbg에서 python 스크립트 실행하는 방법 - pykd [6]
11226정성태6/19/201717383오류 유형: 401. Microsoft Edge를 실행했는데 입력 반응이 없는 경우
11225정성태6/19/201716597오류 유형: 400. Outlook - The required file ExSec32.dll cannot be found in your path. Install Microsoft Outlook again.
11224정성태6/13/201719135.NET Framework: 661. Json.NET의 DeserializeObject 수행 시 속성 이름을 동적으로 바꾸는 방법파일 다운로드1
11223정성태6/12/201718136개발 환경 구성: 318. WCF Service Application과 WCFTestClient.exe
11222정성태6/10/201722297오류 유형: 399. WCF - A property with the name 'UriTemplateMatchResults' already exists.파일 다운로드1
11221정성태6/10/201719306오류 유형: 398. Fakes - Assembly 'Jennifer5.Fakes' with identity '[...].Fakes, [...]' uses '[...]' which has a higher version than referenced assembly '[...]' with identity '[...]'
11220정성태6/10/201724077.NET Framework: 660. Shallow Copy와 Deep Copy [1]파일 다운로드2
11219정성태6/7/201719147.NET Framework: 659. 닷넷 - TypeForwardedFrom / TypeForwardedTo 특성의 사용법
11218정성태6/1/201722097개발 환경 구성: 317. Hyper-V 내의 VM에서 다시 Hyper-V를 설치: Nested Virtualization
11217정성태6/1/201718187오류 유형: 397. initerrlog: Could not open error log file 'C:\...\MSSQL12.MSSQLSERVER\MSSQL\Log\ERRORLOG'
11216정성태6/1/201719918오류 유형: 396. Activation context generation failed
11215정성태6/1/201721897오류 유형: 395. 관리 콘솔을 실행하면 "This app has been blocked for your protection" 오류 발생 [1]
11214정성태6/1/201719045오류 유형: 394. MSDTC 서비스 시작 시 -1073737712(0xC0001010) 오류와 함께 종료되는 문제 [1]
11213정성태5/26/201724582오류 유형: 393. TFS - The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel.
11212정성태5/26/201723861오류 유형: 392. Windows Server 2016에 KB4019472 업데이트가 실패하는 경우
11211정성태5/26/201722571오류 유형: 391. BeginInvoke에 전달한 람다 함수에 CS1660 에러가 발생하는 경우
... 106  107  108  [109]  110  111  112  113  114  115  116  117  118  119  120  ...