jsxgraph: use data-lang to specify graph size

exampleSite/content/en/posts/test-jsxgraph.md

@@ -16,6 +16,8 @@ libraries:
 image: images/feature1/graph.png
 ---
 Use `Shift` and `Mouse Left` to drag, `Shift` and `Mouse Scroll` to zoom.
+
+### Example 1
 ```jessiecode
 point(5, 5) <<id:'pt', name: 'point'>>;
 grid();
@@ -29,6 +31,7 @@ g = functiongraph(f);
 $board.setView([-10, 10, 10, -10]);
 ```
 
+### Example 2
 Point A will stay inside the circle.
 
 ```jessiecode
@@ -51,9 +54,10 @@ p.on('drag',function(){
 });
 ```
 
+### Example3
 This graph shows the properties of triangle. Drag the edges of triangle to observe changes.
 
-```jessiecode
+```jessiecode:400x400
 // code adapted from https://github.com/jsxgraph/JessieCode/blob/master/examples/euler.html
 cerise = <<
     strokeColor: '#901B77',
@@ -111,3 +115,12 @@ 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.

layouts/partials/script/single-script.html

@@ -633,8 +633,18 @@
         board.jc = new JXG.JessieCode();
         board.jc.use(board);
         board.jc.parse(x.innerText);
+        
         board.resizeContainer(300,300);
-        index += 1;
+        var size = x.getAttribute('data-lang').split('x');
+        if (size && size.length == 2) {
+          var w = parseInt(size[0], 10);
+          var h = parseInt(size[0], 10);
+          if (!(isNaN(w) || isNaN(h))) {
+            board.resizeContainer(w, h);
+          }
+        }
+
+        index += 1;        
       });
     }
     {{ end }}