WYSIWYG editor for MathML expressions
npm install strict-content-mathml-editorUmax and get the single symbol Umax instead of the product Umax in the formula editor
guppy_xml_to_mathml to convert Guppy's internal XML format to Strict Content MathML.
index.html and mathml-editor.js are required.
html
Editor
Result
Strict Content MathML3:
`
$3
`javascript
window.onload = function(){
// ID of the editor's div
var editor_id = "guppy1";
// output textarea
var output_mathml = document.getElementById("output_mathml");
// update output textarea when editor content changes
var update_output = function(e) {
try {
var engine = e.target.engine;
var doc = engine.doc;
var content = (new XMLSerializer()).serializeToString(guppy_xml_to_mathml(engine, doc));
content = vkbeautify.xml(content, 4);
output_mathml.value = content;
}
catch(e) {
output_mathml.value = "Failed to parse input: " + e.message;
}
}
// tab completion after backslash prints all candidates in the output textarea
var completion = function(e) {
output_mathml.value = e.candidates.join(", ");
}
Guppy.init({
"osk":new GuppyOSK(),
"path":"node_modules/guppy-js",
"symbols":["node_modules/guppy-js/sym/symbols.json","node_modules/strict-content-mathml-editor/strict-content-mathml-symbols.json"],
"events": {
"ready": update_output,
"change": update_output,
"completion": completion
},
"settings":{
"empty_content": "{\\text{Click to start typing math!}}"
},
});
var g1 = new Guppy(editor_id);
}
`
Custom Symbols
You can define custom mathematical/physical symbols for later use in the formula.
Example: By defining a custom symbol, you can type Umax in the formula editor and get the single symbol Umax instead of the product Umax. In this case, the resulting MathML is .
`javascript
Guppy.add_global_symbol("Umax", {
"output": {
"latex": "U_\\text{max}",
"asciimath": "Umax"
},
"attrs": {
"group": "custom",
"type": "Umax"
}
});
``