티스토리에 자바스크립트 MathJax 사용하기, 수학식 표시하기

아래 소스 코드를 HTML 입력 창에서 입력한다.

예제 소스 코드

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
</script>
<script type="text/javascript"
   src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>


<p>
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}. \tag{1}$$
</p>

실행 결과 화면

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}. \tag{1}$$

$$\begin{align} (x+1)^2 &\cssId{Step1}{= (x+1)(x+1)}\\ &\cssId{Step2}{= x(x+1) + 1(x+1)}\\ &\cssId{Step3}{= (x^2+x) + (x+1)}\\ &\cssId{Step4}{= x^2 + (x + x) + 1}\\ &\cssId{Step5}{= x^2+2x+1}\\ \end{align}$$

출처

https://cdn.mathjax.org/mathjax/latest/test/examples.html

그래프, 사운드 소스코드

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">

<script type="text/javascript" src="http://www.charlie-roberts.com/gibberish/build/gibberish.js"></script>

<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>

<div id="jxgbox" class="jxgbox" style="width:400px; height:400px; border">

<script type="text/javascript">

 Gibberish.init();

 Gibberish.Time.export();

 Gibberish.Binops.export();

 var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false});

 var sinewave = new Gibberish.Sine( 440, .25 ).connect();

 var slide = board.create('slider', [[2, 8], [8, 8], [100, 440, 1000]]);

 var sinecurve = board.create('functiongraph', [function(x) { return 5 * Math.sin((sinewave.frequency / 200.0) * 2* Math.PI * x); }]);

 board.on ('update', function() {

    sinewave.frequency = slide.Value();

 } );

</script>

</div>

결과

출처 : http://jsxgraph.uni-bayreuth.de/wiki/index.php/JSXGraph_and_sound