问题描述:

I'm using MathJax on my website and I want to add some semantic support.

Currently, my MathJax configuration is to take TeX input and spit out HTML-CSS output (unfortunately MathML doesn't work too well in Chrome). I also have a jQuery function that takes the html of any .latex class and dumps it into the title attribute.

The following HTML...

<div class="latex">\[ a^2 + b^2 = c^2 \]</div>

with the following script...

/* jQuery */

$('.latex').attr('title', function() {

return $(this).html();

})

will output...

<div class="latex" title="\[ a^2 + b^2 = c^2 \]">

<div class="MathJax_Display">a2+b2=c2</div> <!-- becomes prettyprint in browser -->

</div>

Obviously the contents of div.MathJax_Display will be styled with a whole slew of spans and classes and styles. I'm just not going to type all that here. Anyway, after the math is rendered, users can hover over div.latex to see the TeX commands in a tooltip.

Now, what I want to do is define a new macro in my MJ configuration that will add a title attribute to a newly-created span of HTML-CSS output, given a bit of TeX input. Let's call that macro \title[2]. Here's what I want to be able to input:

<div class="latex">\[ a^2 + b^2 = \title{c}{'hypotenuse'}^2 \]</div>

And here's what I want it to output:

<div class="latex" title="\[ a^2 + b^2 = \title{c}{'hypotenuse'}^2 \]">

<div class="MathJax_Display">a2+b2=<span title="hypotenuse">c</span>2</div> <!-- prettyprint -->

</div>

If this happens, users who hover over the c in the math will get a tooltip that says "hypotenuse", but hover over any other area of the math and get the original input.

Here's my thinking for the algorithm:

//pseudo-code:

given the TeX input '\title{mathstr}{titlestr}':

var thespan = document.createElement('span');

$(thespan).attr('title', titlestr).html(mathstr);

somehow put this into the MJ output at the right place

网友答案:

Why not just use the action extension that defines \texttip and \mathtip for attaching tooltips to subexpressions? See the MathJax documentation for details.

相关阅读:
Top