Does any one know how to force browser to display MathML code instead of equation?
PS: Rendering MathML to view as plain text gives the TeX output.
For example,
The axis on which the point (0,4) lie, is _____
Should be displayed as:
The axis on which the point <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">(</mo><mn>0</mn><mo>,</mo><mn>4</mn><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">(0, 4)</annotation></semantics></math> lie, is _____
In most common configs, if your ouput is not directly mathML, mathjax stores mathml informations in the attribute data-mathml of a span tag wich wraps the mathJax element
This is what is displayed in the popup when you right click on a mathJax element : show math as -> MathMl Code
If your goal is to grab equations from html in mathml format, you can create a script which parse your document and get all data-mathml attributes.
There is many ways to achieve that, this is just an example you may have to adapt:
function grabMathMl(){
var spanMathMl = document.querySelectorAll(".MathJax");
let results = [];
let i = 0, ln = spanMathMl.length;
for ( i; i < ln; ++i){
if ( spanMathMl[i].hasAttribute("data-mathml") ){
results.push(spanMathMl[i].dataset.mathml);
// if you really want to replace content
spanMathMl[i].innerHTML = "<textarea>"+spanMathMl[i].dataset.mathml+"</textarea>";
}
}
return results;
}
// put this fonction in the mathJax queue for you have to wait until mathJax process is done
MathJax.Hub.Queue(function(){
let equations = grabMathMl();
//console.log (equations.toString());// your equations in mathml
});
<script>
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<div>$$\left|\int_a^b fg\right| \leq \left(\int_a^b
f^2\right)^{1/2}\left(\int_a^b g^2\right)^{1/2}.$$</div>
<div>
\begin{equation} x+1\over\sqrt{1-x^2} \end{equation}
</div>
Then in word, this link should interest you
https://superuser.com/questions/340650/type-math-formulas-in-microsoft-word-the-latex-way#802093
Related
I want to programatically modify the color of variables. I have attempted with this
<p> \(\overline{<font color="#0000EE" id="test_A">A</font>+B}+\overline{B}\)</p>
But it will just break the syntax. I can't break the equation into multiple equations due to it being nested within an overline.
Any tips on adding an identifier to a mathjax variable so I can refer to it within javascript?
Write css class rules instead, then \class{yourClass}{yourVariable} :
.yourClass{
color:#0000EE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>
<p> \(\overline{\class{yourClass}{A}+B}+\overline{B}\)</p>
You now have an 'identifier' for your variable, once it's processed, you can easyly change color with javascript
var button = document.querySelector('button');
button.addEventListener('click',changeColor);
function changeColor(){
document.querySelector('.yourClass').style.color='red';
}
.yourClass{
color:#0000EE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full"></script>
<p> \(\overline{\class{yourClass}{A}+B}+\overline{B}\)</p>
<button>click</button>
I am trying to do some web scraping reading some lines inside a html page. I need to look for a text which is repeated through the page inside some <span> elements. In the following example I would like to end with an array of strings with ['Text number 1','Text number 2','Text number 3']
<html>
...
<span>Text number 1</span>
...
<span>Text number 2</span>
...
<span>Text number 3</span>
...
</html>
I have the following code
sElements = ' ... span'; // I declare the selector.
cs = await page.$$(sElements); // I get an array of ElementHandle
The selector is working as in Google Chrome developer tools it captures exactly the 3 elements I am looking for. Also the cs variable is filled with an array of three elements. But then I am trying
for(c in cs)
console.log(c.innerText);
But undefined is logged. I have tried with .text .value .innerText .innerHTML .textContent ... I do not know what I am missing as I think this is really simple
I have also tried this with the same undefined result.
cs = await page.$$eval(sElements, e => e.innerHTML);
Here is an example that would get the innerText of the last span element.
let spanElement;
spanElement = await this.page.$$('span');
spanElement = spanElement.pop();
spanElement = await spanElement.getProperty('innerText');
spanElement = await spanElement.jsonValue();
If you still are unable to get any text then ensure the selector is correct and that the span elements have an innerText defined (not outerText). You can run $(selector) in Chrome console to check.
Sometimes in LaTeX I'll have a bunch of stuff written up with just e for Euler's constant, instead of using \mathrm{e} or making a macro for it, but I want it to display in roman font as constants should, so in LaTeX I'd do something like:
\DeclareSymbolFont{constants}{OT1}{cmr}{m}{n}
\DeclareMathSymbol{e}{\mathalpha}{constants}{`e}
which makes any e in math mode display as a constant (which is fine because I don't normally call any variables e).
My question is: how can I do this in MathJax? I don't want to go through all the stuff I've written up and change all the es to some macro; I want to configure MathJax to automatically display that character in roman font. So for example $abcde$ should display with abcd italic, but the e should be roman.
One way would be to add
<script type="text/x-mathjax-config">
(function () {
var MML;
MathJax.Hub.Register.StartupHook("mml Jax Ready",function () {
MML = MathJax.ElementJax.mml;
});
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
var TEX = MathJax.InputJax.TeX;
TEX.Definitions.special["e"] = "myConstant";
TEX.Parse.Augment({
myConstant: function (c) {
this.Push(this.mmlToken(MML.mi(c).With({mathvariant:MML.VARIANT.NORMAL})));
}
});
});
})();
</script>
just before the script tag that loads MathJax.js itself. This marks the letter "e" as a special character that causes your myConstant function to be called (being passed the "e", so you could attach other letters to myConstant to get them to be in Roman). The myConstant function creates an <mi> element with mathvariant="normal" containing the given character, and pushes that on the TeX processing stack.
I have a follow-up question for this question: Groovy XmlSlurper get value of the node without children.
It explains that in order to get the local inner text of a (HTML) node without recursively get the nested text of potential inner child nodes as well, one has to use #localText() instead of #text().
For instance, a slightly enhanced example from the original question:
<html>
<body>
<div>
Text I would like to get1.
extra stuff
Text I would like to get2.
link to example
Text I would like to get3.
</div>
<span>
extra stuff
Text I would like to get2.
link to example
Text I would like to get3.
</span>
</body>
</html>
with the solution applied:
def tagsoupParser = new org.ccil.cowan.tagsoup.Parser()
def slurper = new XmlSlurper(tagsoupParser)
def htmlParsed = slurper.parseText(stringToParse)
println htmlParsed.body.div[0].localText()[0]
would return:
[Text I would like to get1., Text I would like to get2., Text I would like to get3.]
However, when parsing the <span> part in this example
println htmlParsed.body.span[0].localText()
the output is
[Text I would like to get2., Text I would like to get3.]
The problem I am facing now is that it's apparently not possible to pinpoint the location ("between which child nodes") of the texts. I would have expected the second invocation to yield
[, Text I would like to get2., Text I would like to get3.]
This would have made it clear: Position 0 (before child 0) is empty, position 1 (between child 0 and 1) is "Text I would like to get2.", and position 2 (between child 1 and 2) is "Text I would like to get3." But given the API works as it does, there is apparently no way to determine whether the text returned at index 0 is actually positioned at index 0 or at any other index, and the same is true for all the other indices.
I have tried it with both XmlSlurper and XmlParser, yielding the same results.
If I'm not mistaken here, it's as a consequence also impossible to completely recreate an original HTML document using the information from the parser because this "text index" information is lost.
My question is: Is there any way to find out those text positions? An answer requiring me to change the parser would also be acceptable.
UPDATE / SOLUTION:
For further reference, here's Will P's answer, applied to the original code:
def tagsoupParser = new org.ccil.cowan.tagsoup.Parser()
def slurper = new XmlParser(tagsoupParser)
def htmlParsed = slurper.parseText(stringToParse)
println htmlParsed.body.div[0].children().collect {it in String ? it : null}
This yields:
[Text I would like to get1., null, Text I would like to get2., null, Text I would like to get3.]
One has to use XmlParser instead of XmlSlurper with node.children().
I don't know jsoup, and i hope it is not interfering with the solution, but with a pure XmlParser you can get an array of children() which contains the raw string:
html = '''<html>
<body>
<div>
Text I would like to get1.
extra stuff
Text I would like to get2.
link to example
Text I would like to get3.
</div>
<span>
extra stuff
Text I would like to get2.
link to example
Text I would like to get3.
</span>
</body>
</html>'''
def root = new XmlParser().parseText html
root.body.div[0].children().with {
assert get(0).trim() == 'Text I would like to get1.'
assert get(0).getClass() == String
assert get(1).name() == 'a'
assert get(1).getClass() == Node
assert get(2) == '''
Text I would like to get2.
'''
}
How to change the font color of Hello alone in "Hello World" using javascript/some other method?
I tried the following code,
var s= session.getCommonUserName()
s.fontcolor("green")
"Hello"+" "+ s.toUpperCase()
where i tried to change just the color of the username alone. But it failed.
I wouldn't bother to send down unformatted HTML to the client and then let the client do the JavaScript work. You create a computed field and give it the data type HTML (that keeps HTML you create intact) and use SSJS. So no JS needs to execute at the client side:
var cu = session.getCommonUserName();
return "Hello"+" <span style=\"color : green\">"+ cu.toUpperCase()+"</span>";
Don't forget to cross your t, dot your i and finish a statement with a semicolon :-)
If you want to do it with client java script, then you must do something like this:
dojo.style("html_element_id", "color", "green");
So in your case you can have have something like:
<p><span id="span1">Hello</span> World.</p>
Or you can do it directly if you don't need to change it with CJS:
<p><span style="color:green">Hello</span> World</p>
one way to do it is to wrap your 'hello' in a html span and then change the color of that span.
<span id='myspan'>hello</span> world
javascript code:
document.getElementById('myspan').style.color='green';
Went old school on this one...
Say you want to put your formatted text in a div
<div id="test">
</div>
Then you need the following javascript to do so:
div = document.getElementById("test");
hello = document.createElement("span");
hello.innerHTML = "Hello"
hello.style.color = "green";
div.appendChild(hello);
div.appendChild(document.createTextNode(" world!"));