24. mathjax 사용하기 -php
설정된 구분기호:
TeX, inline mode: \(...\) 또는 $...$ :
$표기가 필요할 때는 \(, \)를 사용.
한 줄에 표기가 된다.
TeX, display mode: \[...\] or $$...$$ :
수식이 따로 한 줄에 표기 된다.
$표기가 필요할 때는 \[, \]를 사용.
Asciimath: `...`. : 이건 뭔지?...
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config"> //여기서 구분 기호 설정.
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script> //mathjax와 연결한다.
</head>
<body> //아무데서나 구분기호 안에 있는 문자열은 수식으로 바뀐다는....
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>
화면 출력:
EDIT: 아래와 같이 설정하면 .math-editor가 지정된 클래스 안에서는 수식이 랜더링되지 않는다.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
ignoreClass: "math-editor" // put this here
}
});
</script>
예제2: 현재 내가 사용하고 있는 코드임.
<html>
<head>
<title>MathJax TeX Test Page</title>
//이건 jquery를 사용해야 한다.
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
$(document).ready(function(){
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
skipTags: ["script","noscript","style","textarea","pre","code"] //요 부분이 잘 모르겠다.
}
});
$(".code1").html($("#code1_text").val()); //#code1_text에서 작성하면 .code1에 출력된다.
$("#code1_text").keyup(function (){
$(".code1").html($(this).val());
MathJax.Hub.Typeset();
}); //이 부분을 여러 개 만들면 여러 개의 창에 각기 다른 수식을 표현할 수 있다.
});
</script>
</head>
<body>
<div class="code1">
</div>
//아래의 <textarea>에 display:none;을 하면 수식만 보이게 할 수 있다.
<textarea id="code1_text" style="width:500px;height:400px; display:none;" >
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</textarea>
//<textarea>안에 변수를 넣어도 된다. php변수는 <?=php?>처럼 사용한다.
</body>
</html>
TeX 다중창의 예
<script>
$(document).ready(function(){
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
skipTags: ["script","noscript","style","textarea","pre","code"]
}
});
$(".code1").html($("#code1_text").val());
$("#code1_text").keyup(function (){
$(".code1").html($(this).val());
MathJax.Hub.Typeset();
});
$(".code2").html($("#code2_text").val());
$("#code2_text").keyup(function (){
$(".code2").html($(this).val());
MathJax.Hub.Typeset();
}); //위에서 말한 것같이 두 개의 창을 만들 때는 이렇게 사용한다.
});
</script>
</head>
<body>
<textarea id="code1_text" style="width:500px;height:100px;">
<?=php?> //php변수 사용시
</textarea>
<p class="code1" style="border:1px solid; width:500px"></p> //<div>대신 <p>를 사용했다.
<textarea id="code2_text" style="width:500px;height:100px;">
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
</textarea>
<p class="code2" style="border:1px solid; width:500px"></p>
</body>
</html>
'COMPUTER > php' 카테고리의 다른 글
| 26. onclick이벤트 이용하기 -php- (0) | 2017.04.27 |
|---|---|
| 25. 라디오 버튼의 체크 정보 가져오기 -php- (0) | 2017.04.27 |
| 23. 다른 페이지로 이동하기 -php- (0) | 2017.04.23 |
| 22. 트리메뉴를 사용해 보자. (3) css. 우선 순위 문제 -php (0) | 2017.04.13 |
| 21. 트리메뉴를 사용해 보자. (2) api.html -php (0) | 2017.04.13 |