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)
11036정성태8/29/201625839개발 환경 구성: 297. 소스 코드가 없는 닷넷 어셈블리를 디버깅할 때 지역 변숫값을 확인하는 방법
11035정성태8/29/201621780오류 유형: 354. .NET Reflector - PDB 생성 화면에서 "Clear Store"를 하면 "Index and length must refer to a location within the string" 예외 발생
11034정성태8/25/201625848개발 환경 구성: 296. .NET Core 프로젝트를 NuGet Gallery에 배포하는 방법 [2]
11033정성태8/24/201623826오류 유형: 353. coreclr 빌드 시 error C3249: illegal statement or sub-expression for 'constexpr' function
11032정성태8/23/201623041개발 환경 구성: 295. 최신의 Visual C++ 컴파일러 도구를 사용하는 방법 [1]
11031정성태8/23/201618996오류 유형: 352. Error encountered while pushing to the remote repository: Response status code does not indicate success: 403 (Forbidden).
11030정성태8/23/201622229VS.NET IDE: 111. Team Explorer - 추가한 Git Remote 저장소가 Branch에 보이지 않는 경우
11029정성태8/18/201629527.NET Framework: 602. Process.Start의 cmd.exe에서 stdin만 redirect 하는 방법 [1]파일 다운로드1
11028정성태8/15/201622465오류 유형: 351. Octave 설치 시 JRE 경로 문제
11027정성태8/15/201624265.NET Framework: 601. ElementHost 컨트롤의 메모리 누수 현상
11026정성태8/13/201625413Math: 19. 행렬 연산으로 본 해밍코드
11025정성태8/12/201624339개발 환경 구성: 294. .NET Core 프로젝트에서 "Copy to Output Directory" 처리 [1]
11024정성태8/12/201623459오류 유형: 350. "nProtect GameMon" 실행 중에는 Visual Studio 디버깅이 안됩니다! [1]
11023정성태8/10/201625038개발 환경 구성: 293. Azure 구독 후 PaaS 서비스 만들어 보기
11022정성태8/10/201625710개발 환경 구성: 292. Azure Cloud Service 배포시 사용자 정의 작업을 추가하는 방법
11021정성태8/10/201622830오류 유형: 349. System.Runtime.Remoting.RemotingException - Type '..., ..., Version=..., Culture=neutral, PublicKeyToken=null' is not registered for activation [2]
11020정성태8/10/201625739VC++: 98. 원본과 대상 버퍼가 같은 경우 memcpy, wmemcpy 주의점
11019정성태8/10/201642346기타: 60. 도서: 시작하세요! C# 6.0 프로그래밍: 기본 문법부터 실전 예제까지 (2쇄 정오표)
11018정성태8/9/201626443.NET Framework: 600. 단일 메서드 내에서의 할당으로 알아보는 자바와 닷넷의 GC 차이점 [1]
11017정성태8/9/201627730웹: 33. HTTP 쿠키에 한글 값을 설정하는 방법
11016정성태8/7/201625910개발 환경 구성: 291. Windows Server Containers 소개
11015정성태8/7/201624231오류 유형: 348. Windows Server 2016 TP5에서 Windows Containers의 docker run 실행 시 encountered an error during Start failed in Win32
11014정성태8/6/201624942오류 유형: 347. Hyper-V Virtual Machine Management service Account does not have permission to open attachment
11013정성태8/6/201635777개발 환경 구성: 290. Windows 10에서 경험해 보는 Windows Containers와 docker [4]
11012정성태8/6/201625858오류 유형: 346. Windows 10에서 Windows Containers의 docker run 실행 시 encountered an error during CreateContainer failed in Win32 발생
11011정성태8/6/201627307기타: 59. outlook.live.com 메일 서비스의 아웃룩 POP3 설정하는 방법
... 106  107  108  109  110  111  112  113  114  115  116  [117]  118  119  120  ...