JSXGraph test

Template for JSXGraph

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph@1.1.0/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

CSS

.jsxgDefaultFont {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18;
  }

  .myFont {
      font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
      border: 1px solid black;
      padding: 5px;
      border-radius:5px;
  }

JavaScript

JXG.Options.text.cssDefaultStyle = '';
JXG.Options.text.highlightCssDefaultStyle = '';

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-1,15,15,-1],
    showcopyright: false,
    axis: true,
    defaultAxes: {
        x: {
            strokeColor: 'grey',
            ticks: {
                visible: 'inherit',
            }
        },
        y: {
            strokeColor: 'grey',
            ticks: {
                visible: 'inherit',
            }
        },
    },
    zoom: {
        factorX: 1.25,
        factorY: 1.25,
        wheel: true,
        needshift: false,
        eps: 0.1
    },

    showZoom: false,
    showNavigation: false,
});

        var txt = board.create('text', [3,4, " <span id='par'>(</span> Hello world <span id='par'>)</span>"], 
          {
            cssClass: 'myFont', 
            highlightCssClass: 'myFont',
            strokeColor: 'red',
            highlightStrokeColor: 'blue',
            fontSize:20
          });