I'm trying to use Mathquill to put an editable LaTeX formula in a webpage to represent what's like in Desmos; However soon I fould that the formula doesn't look like that in Desmos--The integral symbol is not as big as in Desmos!
After a while I fould the problem is, exactly, that Mathquill didn't render my formula in LaTeX's so called "display mode", in which the integral symbol will be render bigger.
This is what looks like in my page: enter image description here
This is what looke like in Desmos: enter image description here
I've tried in many ways to make it render in display mode, including adding "$$" prefix & postfix, using "\displaystyle{...}" command, and altering <span> to a <div> element so that its CSS "display" attr is set to "block" by default...
All those failed...
And I could find any way to do it via editing the config in Mathquill API.
Could anyone help?
---And here is the source code of my pageļ¼
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="./mathquill-0.10.1/mathquill.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./mathquill-0.10.1/mathquill.js"></script>
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<p><span id="answer"></span></p>
<script>
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan, {
autoCommands: 'integral int',
autoOperatorNames: 'Desmos Beginner Hacker Ideas You',
handlers: {
edit: function() {
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
//checkAnswer(enteredMath);
}
}
});
answerMathField.latex('Desmos=\\int _{Beginner}^{Hacker}IdeasdYou');
</script>
</body>
</html>