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
정성태

[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
13569정성태2/28/2024144닷넷: 2221. C# - LoadContext, LoadFromContext 그리고 GAC파일 다운로드1
13568정성태2/27/2024288닷넷: 2220. C# - .NET Framework 프로세스의 LoaderOptimization 설정을 확인하는 방법파일 다운로드1
13567정성태2/27/2024269오류 유형: 898. .NET Framework 3.5 이하에서 mscoree.tlb 참조 시 System.BadImageFormatException파일 다운로드1
13566정성태2/27/2024274오류 유형: 897. Windows 7 SDK 설치 시 ".NET Development" 옵션이 비활성으로 선택이 안 되는 경우
13565정성태2/23/2024568닷넷: 2219. .NET CLR2 보안 모델에서의 개별 System.Security.Permissions 제어
13564정성태2/22/20241007Windows: 259. Hyper-V Generation 1 유형의 VM을 Generation 2 유형으로 바꾸는 방법
13563정성태2/21/20241039디버깅 기술: 196. windbg - async/await 비동기인 경우 메모리 덤프 분석의 어려움
13562정성태2/21/2024993오류 유형: 896. ASP.NET - .NET Framework 기본 예제에서 System.Web에 대한 System.IO.FileNotFoundException 예외 발생
13561정성태2/20/20241099닷넷: 2218. C# - (예를 들어, Socket) 비동기 I/O에 대한 await 호출 시 CancellationToken을 이용한 취소파일 다운로드1
13560정성태2/19/20241147디버깅 기술: 195. windbg 분석 사례 - Semaphore 잠금으로 인한 Hang 현상 (닷넷)
13559정성태2/19/20241605오류 유형: 895. ASP.NET - System.Security.SecurityException: 'Requested registry access is not allowed.'
13558정성태2/18/20241223닷넷: 2217. C# - 최댓값이 1인 SemaphoreSlim 보다 Mutex 또는 lock(obj)를 선택하는 것이 나은 이유
13557정성태2/18/20241095Windows: 258. Task Scheduler의 Author 속성 값을 변경하는 방법
13556정성태2/17/20241157Windows: 257. Windows - Symbolic (hard/soft) Link 및 Junction 차이점
13555정성태2/15/20241218닷넷: 2216. C# - SemaphoreSlim 사용 시 주의점
13554정성태2/15/2024999VS.NET IDE: 189. Visual Studio - 닷넷 소스코드 디컴파일 찾기가 안 될 때
13553정성태2/14/20241138닷넷: 2215. windbg - thin/fat lock 없이 동작하는 Monitor.Wait + Pulse
13552정성태2/13/20241078닷넷: 2214. windbg - Monitor.Enter의 thin lock과 fat lock
13551정성태2/12/20241177닷넷: 2213. ASP.NET/Core 웹 응용 프로그램 - 2차 스레드의 예외로 인한 비정상 종료
13550정성태2/11/20241244Windows: 256. C# - Server socket이 닫히면 Accept 시켰던 자식 소켓이 닫힐까요?
13549정성태2/3/20241522개발 환경 구성: 706. C# - 컨테이너에서 실행하기 위한 (소켓) 콘솔 프로젝트 구성
13548정성태2/1/20241332개발 환경 구성: 705. "Docker Desktop for Windows" - ASP.NET Core 응용 프로그램의 소켓 주소 바인딩(IPv4/IPv6 loopback, Any)
13547정성태1/31/20241157개발 환경 구성: 704. Visual Studio - .NET 8 프로젝트부터 dockerfile에 추가된 "USER app" 설정
13546정성태1/30/20241087Windows: 255. (디버거의 영향 등으로) 대상 프로세스가 멈추면 Socket KeepAlive로 연결이 끊길까요?
13545정성태1/30/20241019닷넷: 2212. ASP.NET Core - 우선순위에 따른 HTTP/HTTPS 호스트:포트 바인딩 방법
[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...