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)
11529정성태5/23/201874.NET : 601. 닷넷의 관리 포인터(Managed Pointer)와 System.TypedReference파일 다운로드1
11528정성태5/17/2018138.NET : 600. C# 7.2 - 3항 연산자에 ref 지원 [1]
11527정성태5/17/2018100오류 유형 : 463. RDP 로그인 에러 - This could be due to CredSSP encryption oracle remediation.
11526정성태5/16/2018111.NET : 599. C# 7.2 - 메서드의 반환값 및 로컬 변수에 ref readonly 기능 추가파일 다운로드1
11525정성태5/16/2018109.NET : 598. C# 7.2 - 메서드의 매개 변수에 in 변경자 추가파일 다운로드1
11524정성태5/15/2018142.NET : 597. C# 7.2 - readonly 구조체파일 다운로드1
11523정성태5/15/2018150.NET : 596. C# - 값 형식의 readonly 인스턴스에 대한 메서드 호출 시 defensive copy 발생 [1]파일 다운로드1
11522정성태5/15/2018106개발 환경 구성: 386. Azure - VM 진단 설정 화면의 "This subscription is not registered with the Microsoft.Insights resource provider."
11521정성태5/15/2018144개발 환경 구성: 385. Azure - 원하는 성능 데이터로 모니터링 대시보드 구성
11520정성태5/12/2018171.NET : 595. C# 7.1 - 참조 어셈블리(Ref Assemblies)
11519정성태5/12/2018202개발 환경 구성: 384. ASP.NET Web Application 프로젝트의 FileSystem 배포(Publish) 시 Before/After Task 설정 방법 [1]
11518정성태5/11/2018176.NET : 594. C# 7.0에서도 부분적으로 가능해진 "타입 추론을 통한 튜플의 변수명 자동 지정"
11517정성태5/10/2018186.NET : 593. Azure runbook 예제 - 6시간 동안 수행 중인 VM을 중지파일 다운로드1
11516정성태5/9/2018202.NET : 592. Azure runbook을 PowerShell 또는 C# 코드로 실행하는 방법파일 다운로드1
11515정성태5/9/2018257.NET : 591. C# 6 - Expression bodied function
11514정성태5/3/2018374오류 유형 : 462. Bitvise - Error in component session/transport/kexHandler [1]
11513정성태5/10/2018524.NET : 590. C# 언어의 공변성과 반공변성 [5]파일 다운로드1
11512정성태5/3/2018180개발 환경 구성: 383. Azure runbook 실행 시 "Errors", "All Logs"에 오류 메시지가 출력되는 경우
11511정성태5/2/2018257개발 환경 구성: 382. Azure - Runbook 기능 소개
11510정성태4/30/2018254.NET : 589. windbg로 확인하는 Finalizer를 가진 객체의 GC 과정파일 다운로드1
11509정성태4/28/2018298.NET : 588. windbg로 확인하는 객체의 GC 여부
11508정성태4/23/2018388개발 환경 구성: 381. MSBuild를 이용해 프로젝트 배포 후 결과물을 zip 파일로 압축하는 방법파일 다운로드1
11507정성태4/20/2018374개발 환경 구성: 380. MSBuild - 빌드 전/후, 배포 전/후 실행하고 싶은 Task 정의
11506정성태5/18/2018642.NET : 587. C#에서 enum을 boxing 없이 int로 변환하기 - 두 번째 이야기파일 다운로드1
11505정성태4/19/2018319개발 환경 구성: 379. Azure Web App 확장 예제 - Simple WebSite Extension
[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...