diff --git a/README.ko.md b/README.ko.md index 4dd3d72..8b328a9 100644 --- a/README.ko.md +++ b/README.ko.md @@ -1045,7 +1045,7 @@ socialOptions: # override params.toml file socialOptions ## External Library -현재 지원하는 외부 라이브러리는 Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram 입니다. front-matter에 값을 넣어주시면 해당 라이브러리가 로드됩니다. +현재 지원하는 외부 라이브러리는 Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram, jsxgraph 입니다. front-matter에 값을 넣어주시면 해당 라이브러리가 로드됩니다. ```bash --- @@ -1062,6 +1062,7 @@ libraries: - mermaid - viz - wavedrom +- jsxgraph --- ``` diff --git a/README.md b/README.md index 98a2cad..f11f6d2 100644 --- a/README.md +++ b/README.md @@ -1070,7 +1070,7 @@ If you want to support mobile favicon, use [favicon-generator](https://www.favic ## External Library -If you want use external libraries, this theme currently supporting Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram. Just add some variable to a front-matter. +If you want use external libraries, this theme currently supporting Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram, jsxgraph. Just add some variable to a front-matter. ```bash --- @@ -1087,6 +1087,7 @@ libraries: - mermaid - viz - wavedrom +- jsxgraph --- ``` diff --git a/data/lib.toml b/data/lib.toml index e80f7f2..41e74ed 100644 --- a/data/lib.toml +++ b/data/lib.toml @@ -62,6 +62,9 @@ sri = "sha256-dsvC/UolMujQ/UQ7lVeJ7Q/FV3BSzWO0rc8iz1rqHQo=" url = "https://cdn.jsdelivr.net/npm/typewriter-effect@2.13.1/dist/core.js" +[js.jsxgraph] + sri = "sha256-vSFHJZi3+DbmVrl8xDFCHPI3jy9n7sbvlISCPqpVFrQ=" + url = "https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js" @@ -74,6 +77,9 @@ sri = "sha256-On01v36B8LRDuL2tqhqs7Gb3Cm/NIpsLFy4OarOodUA=" url = "https://cdn.jsdelivr.net/npm/@rokt33r/js-sequence-diagrams@2.0.6-2/dist/sequence-diagram-min.css" +[css.jsxgraph] + sri = "sha256-TiPwINPr/OB7izwBT0o+kJo/HchaLj6ln7fZpOzgXQU=" + url = "https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css" diff --git a/exampleSite/content/en/posts/test-jsxgraph.md b/exampleSite/content/en/posts/test-jsxgraph.md new file mode 100644 index 0000000..0f59f7a --- /dev/null +++ b/exampleSite/content/en/posts/test-jsxgraph.md @@ -0,0 +1,126 @@ +--- +title: "jsxgraph support" +date: 2020-08-03T14:00:00+08:00 +description: "Dynamic Mathematics with JavaScript" +draft: false +enableToc: false +enableTocContent: false +tags: +- +series: +- +categories: +- diagram +libraries: +- jsxgraph +image: images/feature1/graph.png +--- +Use `Shift` and `Mouse Left` to drag, `Shift` and `Mouse Scroll` to zoom. + +### Example 1 +```jessiecode +point(5, 5) <>; +grid(); +axis([0,0],[0,1]); +axis([0,0],[1,0]); + +a = slider([1, 3], [6, 3], [0, 5, 10]) <>; +f = function (x) {return 7*exp(-V(a)*x^2)*cos(6*PI*x);}; +g = functiongraph(f); + +$board.setView([-10, 10, 10, -10]); +``` + +### Example 2 +Point A will stay inside the circle. + +```jessiecode +// code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/gaetano_g.html +O=point(0,0)<>; +U=point(1,0)<>; +I=point(0,1)<>; +x=line(O,U)<>; +y=line(O,I)<>; +r = 3; +c=circle(O,r); +p=point(1,1)<>; +g=<>; +p.on('drag',function(){ + if(p.X()^2+p.Y()^2>r*r) { + p.moveTo([g.x,g.y]); + }; + g.x=p.X(); + g.y=p.Y(); +}); +``` + +### Example3 +This graph shows the properties of triangle. Drag the edges of triangle to observe changes. + +```jessiecode:400x400 +// code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/euler.html +cerise = << + strokeColor: '#901B77', + fillColor: '#CA147A', + visible: true, + withLabel: true +>>; +grass = << + strokeColor: '#009256', + fillColor: '#65B72E', + visible: true, + withLabel: true +>>; +perp = << + strokeColor: 'black', + dash: 1, + strokeWidth: 1, + point: cerise +>>; +median = << + strokeWidth: 1, + strokeColor: '#333333', + dash:2 +>>; + +// The triangle +A = point(1, 0) cerise; +B = point(-1, 0) cerise; +C = point(0.2, 1.5) cerise; + +pol = polygon(A, B, C) << fillColor: '#FFFF00', borders: << strokeWidth: 2, strokeColor: '#009256' >> >>; + +// The perpendiculars +H_c = perpendicularsegment(pol.borders[0], C) perp; +H_a = perpendicularsegment(pol.borders[1], A) perp; +H_b = perpendicularsegment(pol.borders[2], B) perp; + +// intersection +H = intersection(H_c, H_b, 0) grass; + +// Midpoints +mAB = midpoint(A, B) cerise; +mBC = midpoint(B, C) cerise; +mCA = midpoint(C, A) cerise; + +ma = segment(mBC, A) median; +mb = segment(mCA, B) median; +mc = segment(mAB, C) median; +S = intersection(ma, mc, 0) grass; + +grass.name = 'U'; +c = circumcircle(A, B, C) << strokeColor: '#000000', dash: 3, strokeWidth: 1, center: grass >>; + +euler = line(H, S) << strokeWidth: 2, strokeColor:'#901B77' >>; + +$board.setView([-1.5, 2, 1.5, -1]); +``` + +### Note +You can specify height and weight in the language specifier. e.g. +````markdown +```jessiecode:400x300 +// codes... +``` +```` +will change the graph size to width 400px and height 300px. diff --git a/layouts/partials/script/single-script.html b/layouts/partials/script/single-script.html index 407e1e4..be0c4d3 100644 --- a/layouts/partials/script/single-script.html +++ b/layouts/partials/script/single-script.html @@ -71,6 +71,11 @@ {{ end }} +{{ if in .Params.Libraries "jsxgraph" }} + + +{{ end }} +