I did my best to replicate this example from the JSXGraph website:
Below is the condensed HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Covid Sandbox</title>
<meta name="description" content="Covid Sandbox">
</head>
<body>
<script src="third party/jquery-3.5.1.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="254f565d425744554d65140b140b15">[email protected]</a>/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a9b0bba4b1a2b3ab83f2edf2edf3">[email protected]</a>/distrib/jsxgraph.css" />
<div id="jsxgbox">
</div>
</body>
</html>
<style>
.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;
}
</style>
<script src="js/test.js"></script>
By trying it out in test.js with some JavaScript code:
JXG.Options.text.cssClass = 'jsxgDefaultFont';
board = JXG.JSXGraph.initBoard('jsxgbox', {
boundingbox: [-1,15,15,-1],
showcopyright: false,
axis: true,
renderer: 'canvas',
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', [0,0, " <span id='par'>(</span> Hello world <span id='par'>)</span>"],
{
cssClass:'myFont', strokeColor:'red',
highlightCssClass: 'myFontHigh',
fontSize:20
});
board.update();
It seems like the inline HTML is not being correctly interpreted (displaying span\ Hello World \span). I'm uncertain about what I might be doing wrong.