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)
11186정성태4/24/201723186VS.NET IDE: 117. Visual Studio 확장(VSIX)을 이용해 사용자 매크로를 추가하는 방법 [1]파일 다운로드1
11185정성태4/22/201721018VS.NET IDE: 116. Visual Studio 확장(VSIX)을 이용해 사용자 메뉴 추가하는 방법 (2) - 동적 메뉴 구성파일 다운로드1
11184정성태4/21/201722486VS.NET IDE: 115. Visual Studio 확장(VSIX)을 이용해 사용자 메뉴 추가하는 방법파일 다운로드1
11183정성태4/19/201721199.NET Framework: 654. UWP 앱에서 FolderPicker 사용 시 유의 사항파일 다운로드1
11182정성태4/19/201725053개발 환경 구성: 313. Nuget Facebook 라이브러리를 이용해 ASP.NET 웹 폼과 로그인 연동하는 방법
11181정성태4/18/201722264개발 환경 구성: 312. Azure Web Role의 AppPool 실행 권한을 Local System으로 바꾸는 방법
11180정성태4/16/201725402Java: 18. Java의 Memory Mapped File 자원 반환이 안 되는 문제
11179정성태4/13/201718682기타: 64. SVG Converter 스토어 앱 개인정보 보호 정책 안내
11178정성태4/10/201720724개발 환경 구성: 311. COM+ 관리자의 DCOM 구성에 나오는 기준
11177정성태4/7/201720771.NET Framework: 653. C# 7 새로운 문법(1) - 더욱 편리해진 Out 변수 사용파일 다운로드1
11176정성태4/5/201717880VC++: 117. Visual Studio - ATL COM 개체를 단위 테스트 하는 방법
11175정성태4/5/201726947.NET Framework: 652. C# 개발자를 위한 C++ COM 객체의 기본 구현 방식 설명파일 다운로드1
11174정성태4/3/201720921VC++: 116. Visual Studio 단위 테스트 - Failed to set up the execution context to run the test
11173정성태4/3/201724111VC++: 115. Visual Studio에서 C++ DLL을 대상으로 단위 테스트할 때 비정상 종료한다면?파일 다운로드1
11172정성태4/3/201723103.NET Framework: 651. C# - 특정 EXE 프로세스를 종료시킨 EXE를 찾아내는 방법파일 다운로드1
11171정성태3/31/201720382VS.NET IDE: 114. Visual Studio 디버깅 경고 창 - You are debugging a Release build of ...
11170정성태3/31/201722848.NET Framework: 650. C# - CachedAnonymousMethodDelegate 유형의 코드 생성
11169정성태3/30/201722406VC++: 114. C++ vtable의 가상 함수 호출 가로채기파일 다운로드1
11168정성태3/29/201724923VC++: 113. C++ 클래스 상속 관계의 vtable 생성 과정
11167정성태3/28/201725324VC++: 112. C++의 가상 함수 테이블 (vtable)은 언제 생성될까요? [2]
11166정성태3/28/201720547오류 유형: 382. System.Data.SqlClient.SqlException - Arithmetic overflow error converting IDENTITY to data type int.
11165정성태3/27/201723576오류 유형: 381. Visual C++에서 min, max 함수를 사용한 경우 C2589, C2059 컴파일 오류 발생
11164정성태3/27/201732125VC++: 111. C++ 클래스의 상속에 따른 메모리 구조 [2]파일 다운로드1
11163정성태3/25/201721572VC++: 110. CreateThread Win32 API에 C++ 클래스의 멤버 함수를 전달하는 방법파일 다운로드1
11162정성태3/24/201726075오류 유형: 380. Visual Studio 빌드 실패 - The OutputPath property is not set for project
11161정성태3/24/201717726오류 유형: 379. ICOMAdminCatalog.GetCollection 호출 시 0x80070422 예외 발생
... 106  107  108  109  110  [111]  112  113  114  115  116  117  118  119  120  ...