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)
12439정성태12/4/202010287디버깅 기술: 176. windbg - 특정 Win32 API에서 BP가 안 걸리는 경우 (2) [1]
12438정성태12/2/202010200오류 유형: 688. .Visual C++ - Error C2011 'sockaddr': 'struct' type redefinition
12437정성태12/1/20209887VS.NET IDE: 155. pfx의 암호 키 파일을 Visual Studio 없이 등록하는 방법
12436정성태12/1/202010163오류 유형: 687. .NET Core 2.2 빌드 - error MSB4018: The "RazorTagHelper" task failed unexpectedly.
12435정성태12/1/202015621Windows: 181. 윈도우 환경에서 클라이언트 소켓의 최대 접속 수 (4) - ReuseUnicastPort를 이용한 포트 고갈 문제 해결 [1]파일 다운로드1
12434정성태11/30/202010942Windows: 180. C# - dynamicport 값의 범위를 알아내는 방법
12433정성태11/29/20209987Windows: 179. 윈도우 환경에서 클라이언트 소켓의 최대 접속 수 (3) - SO_PORT_SCALABILITY파일 다운로드1
12432정성태11/29/202011343Windows: 178. 윈도우 환경에서 클라이언트 소켓의 최대 접속 수 (2) - SO_REUSEADDR [1]파일 다운로드1
12431정성태11/27/20209284.NET Framework: 976. UnmanagedCallersOnly + C# 9.0 함수 포인터 사용 시 x86 빌드에서 오동작하는 문제파일 다운로드1
12430정성태11/27/202010014오류 유형: 686. Ubuntu - E: The repository 'cdrom://...' does not have a Release file.
12429정성태11/25/202010100디버깅 기술: 175. windbg - 특정 Win32 API에서 BP가 안 걸리는 경우
12428정성태11/25/20209015VS.NET IDE: 154. Visual Studio - .NET Core App 실행 시 dotnet.exe 실행 화면만 나오는 문제
12427정성태11/24/202010205.NET Framework: 975. .NET Core를 직접 호스팅해 (runtimeconfig.json 없이) EXE만 배포해 실행파일 다운로드1
12426정성태11/24/20208774오류 유형: 685. WinDbg Preview - error InitTypeRead
12425정성태11/24/20209890VC++: 141. Visual C++ - "Treat Warnings As Errors" 옵션이 꺼져 있는데도 일부 경고가 에러 처리되는 경우
12424정성태11/24/202010269VC++: 140. C++의 연산자 동의어(operator synonyms), 대체 토큰 [1]
12423정성태11/22/202011161.NET Framework: 974. C# 9.0 - (16) 제약 조건이 없는 형식 매개변수 주석(Unconstrained type parameter annotations)파일 다운로드1
12422정성태11/21/20208969.NET Framework: 973. .NET 5, .NET Framework에서만 허용하는 UnmanagedCallersOnly 사용예파일 다운로드1
12421정성태11/19/20208742.NET Framework: 972. DNNE가 출력한 NE DLL을 직접 생성하는 방법파일 다운로드1
12420정성태11/19/20207908오류 유형: 684. Visual C++ - MSIL .netmodule or module compiled with /GL found; restarting link with /LTCG; add /LTCG to the link command line to improve linker performance
12419정성태11/19/20209159VC++: 139. Visual C++ - .NET Core의 nethost.lib와 정적 링크파일 다운로드1
12418정성태11/19/202011212오류 유형: 683. Visual C++ - error LNK2038: mismatch detected for 'RuntimeLibrary': value 'MT_StaticRelease' doesn't match value 'MDd_DynamicDebug'파일 다운로드1
12417정성태11/19/20208615오류 유형: 682. Visual C++ - warning LNK4099: PDB '...pdb' was not found with '...lib(pch.obj)' or at '...pdb'; linking object as if no debug info
12416정성태11/19/20209881오류 유형: 681. Visual C++ - error LNK2001: unresolved external symbol _CrtDbgReport
12415정성태11/18/20209935.NET Framework: 971. UnmanagedCallersOnly 특성과 DNNE 사용파일 다운로드1
12414정성태11/18/202011010VC++: 138. x64 빌드에서 extern "C"가 아닌 경우 ___cdecl name mangling 적용 [4]파일 다운로드1
... 46  47  [48]  49  50  51  52  53  54  55  56  57  58  59  60  ...