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

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

사실 제가 수학을 잘 못해서 ^^ 수학 관련 글을 쓰는 경우는 거의 없습니다. 그래도 가끔씩 재미삼아 해보기는 하는데 그 때마다 블로그에 간단한 수학 식을 써야 할 때면 그래픽 이미지를 첨부해야 하는 불편함이 있었습니다. 예를 들어, 다음의 글에서도 그래픽으로 수학 수식을 저장해 놓고 첨부한 경우입니다.

황금비율 증명
; https://www.sysnet.pe.kr/2/0/1312

그런데 오늘 우연히 다음의 블로그를 방문하게 되었는데요.

알고리즘 대회에 필요한 수학 
; https://algospot.com/wiki/read/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98_%EB%8C%80%ED%9A%8C%EC%97%90_%ED%95%84%EC%9A%94%ED%95%9C_%EC%88%98%ED%95%99

놀랍게도 내부에 표현된 수학 기호 및 수식들이 이미지가 아닌 텍스트 형식이었습니다. (물론 ^^ 행렬도 표현할 수 있고.)

IE 개발자 도구를 통해 소스를 살펴 보니 다음과 같이 span 태그의 class값이 mathjax-preview와 "math/tex" 타입의 스크립트 태그가 연이은 형태로 구성되어 있습니다.

<script type="math/tex">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</script>

위의 태그가 HTML 페이지에서 다음과 같이 바뀌어서 보이게 되는 것입니다. (네이버 블로그에서는 그냥 문자열로 출력됩니다.)



어떻게 된 일인지 파악하기 위해 해당 페이지에 링크된 자바스크립트 목록을 보니 MathJax.js가 눈에 띄는데요.

<script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js"></script>

MathJax.js 파일의 내용에는 제 블로그에도 무료로 사용할 수 있다는 사실을 알려주고 있습니다. ^^

/*
 *  /MathJax.js
 *
 *  Copyright (c) 2009-2014 The MathJax Consortium
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
 

좀 더 정보를 찾아보니 MathJax.js가 Latex 수식을 지원한다는군요. ^^

블로그(예: 티스토리)에서 latex (라텍) 수식 쓰기
; http://soojob.tistory.com/31

사용법을 간단하게 정리하면 다음의 HTML 페이지로 보여드릴 수 있습니다. ^^

<!DOCTYPE html>

<head>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        extensions: [],
        jax: ["input/TeX", "output/HTML-CSS"],
        preRemoveClass: "mathjax-preview",
        "HTML-CSS": { availableFonts: ["TeX"] }
    });
</script>

<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js"></script>

</head>



<body>

<span class="mathjax-preview">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</span><script type="math/tex">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</script>

</body>

</html>

오호~~~ 멋집니다. ^^ 이제 제 블로그 글에서도 가볍게 Latex 수식을 쓸 수 있게 되었습니다. ^^

참고로, 다양한 수식에 대한 TeX 표기 예제는 다음의 글을 참조하세요. ^^

Mathematical Notation: LaTeX, Mathematica, HTML Entities, Unicode
; http://hyperpolyglot.org/math-notation



문제는 스크립트 태그를 넣을 수 없는 네이버 블로그인데요. 구글에서 TeX에 대해 착한 서비스를 하고 있군요. ^^

네이버 블로그에서 수식입력기 없이 수식 입력하기
; http://yut951121.blog.me/100184779927

그래서 다음과 같이 아예 이미지로 출력 결과가 나옵니다.

<img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=x=\frac{-b\pm%20\sqrt{b^2%20-4ac}}{2a}">

TeX

<img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=\begin{pmatrix}+2+%26+3+\\+1+%26+2+\end{pmatrix}"> TeX




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

[연관 글]






[최초 등록일: ]
[최종 수정일: 7/10/2021]

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

비밀번호

댓글 작성자
 



2014-07-21 01시02분
http://www.codecogs.com/eqnedit.php

"자유주의"님이 CodeCogs 사이트를 알려주셨습니다. ^^ 웹 상에서 테스트 해보고 곧바로 확인할 수 있어 매우 편리합니다.
정성태
2015-04-01 03시20분
[주영현] html을 이용해서 수식을 작성하고 싶어서 댓글 달아요
아인슈타인의 특수상대성이론의 시간팽창공식과 길이수축공식을 이용하고싶어요
식의 모든 값은 일정하게 정해져있고 한 개의 값만 빈칸으로 만들고 그 빈칸에 숫자를 넣었을 때 계산된 값이 도출될 수 있도록 만들고싶어요
꼭 도와주셨으면 좋겠습니다.
제가 정말 급하거든요
제 이메일은 cller@naver.com 입니다
연락 부탁드려요
[guest]
2015-04-01 03시48분
@주영현 저도 MathJax 초보 사용자라서 복잡한 수식을 도와드릴 정도는 아닙니다. 게다가 MathJax는 표현식일 뿐 프로그래밍 코드는 아니기 때문에 빈칸에 숫자를 넣는 식으로 해서 값이 도출될 수 있도록 만들수는 없습니다.
정성태
2017-08-26 01시29분
HTML에서 수학 관련 기호/수식을 표현하기 위한 방법 - MathJax.js - 두번째 이야기
; http://www.sysnet.pe.kr/2/0/10910
정성태

... 46  47  48  [49]  50  51  52  53  54  55  56  57  58  59  60  ...
NoWriterDateCnt.TitleFile(s)
12414정성태11/18/202011014VC++: 138. x64 빌드에서 extern "C"가 아닌 경우 ___cdecl name mangling 적용 [4]파일 다운로드1
12413정성태11/17/202010711.NET Framework: 970. .NET 5 / .NET Core - UnmanagedCallersOnly 특성을 사용한 함수 내보내기파일 다운로드1
12412정성태11/16/202012960.NET Framework: 969. .NET Framework 및 .NET 5 - UnmanagedCallersOnly 특성 사용파일 다운로드1
12411정성태11/12/20209949오류 유형: 680. C# 9.0 - Error CS8889 The target runtime doesn't support extensible or runtime-environment default calling conventions.
12410정성태11/12/20209881디버깅 기술: 174. windbg - System.TypeLoadException 예외 분석 사례
12409정성태11/12/202011260.NET Framework: 968. C# 9.0의 Function pointer를 이용한 함수 주소 구하는 방법파일 다운로드1
12408정성태11/9/202022728도서: 시작하세요! C# 9.0 프로그래밍 [8]
12407정성태11/9/202011528.NET Framework: 967. "clr!JIT_DbgIsJustMyCode" 호출이 뭘까요?
12406정성태11/8/202013117.NET Framework: 966. C# 9.0 - (15) 최상위 문(Top-level statements) [5]파일 다운로드1
12405정성태11/8/202010565.NET Framework: 965. C# 9.0 - (14) 부분 메서드에 대한 새로운 기능(New features for partial methods)파일 다운로드1
12404정성태11/7/202011085.NET Framework: 964. C# 9.0 - (13) 모듈 이니셜라이저(Module initializers)파일 다운로드1
12403정성태11/7/202011141.NET Framework: 963. C# 9.0 - (12) foreach 루프에 대한 GetEnumerator 확장 메서드 지원(Extension GetEnumerator)파일 다운로드1
12402정성태11/7/202011729.NET Framework: 962. C# 9.0 - (11) 공변 반환 형식(Covariant return types) [1]파일 다운로드1
12401정성태11/5/202010634VS.NET IDE: 153. 닷넷 응용 프로그램에서의 "My Code" 범위와 "Enable Just My Code"의 역할 [1]
12400정성태11/5/20207641오류 유형: 679. Visual Studio - "Source Not Found" 창에 "Decompile source code" 링크가 없는 경우
12399정성태11/5/202011338.NET Framework: 961. C# 9.0 - (10) 대상으로 형식화된 조건식(Target-typed conditional expressions)파일 다운로드1
12398정성태11/4/20209867오류 유형: 678. Windows Server 2008 R2 환경에서 Powershell을 psexec로 원격 실행할 때 hang이 발생하는 문제
12397정성태11/4/202010011.NET Framework: 960. C# - 조건 연산자(?:)를 사용하는 경우 달라지는 메서드 선택 사례파일 다운로드1
12396정성태11/3/20208345VS.NET IDE: 152. Visual Studio - "Tools" / "External Tools..."에 등록된 외부 명령어에 대한 단축키 설정 방법
12395정성태11/3/20209636오류 유형: 677. SSMS로 DB 접근 시 The server principal "..." is not able to access the database "..." under the current security context.
12394정성태11/3/20208086오류 유형: 676. cacls - The Recycle Bin on ... is corrupted. Do you want to empty the Recycle Bin for this drive?
12393정성태11/3/20208547오류 유형: 675. Visual Studio - 닷넷 응용 프로그램 디버깅 시 Disassembly 창에서 BP 설정할 때 "Error while processing breakpoint." 오류
12392정성태11/2/202012648.NET Framework: 959. C# 9.0 - (9) 레코드(Records) [4]파일 다운로드1
12390정성태11/1/202010939디버깅 기술: 173. windbg - System.Configuration.ConfigurationErrorsException 예외 분석 방법
12389정성태11/1/202010682.NET Framework: 958. C# 9.0 - (8) 정적 익명 함수 (static anonymous functions)파일 다운로드1
12388정성태10/29/202010144오류 유형: 674. 어느 순간부터 닷넷 응용 프로그램 실행 시 System.Configuration.ConfigurationErrorsException 예외가 발생한다면?
... 46  47  48  [49]  50  51  52  53  54  55  56  57  58  59  60  ...