[TW5] [MathJax] More flexible MathJax implementation? (Support for custom TeX on page load, proper rendering of <$reveal> widgets, etc.)

[DM]

Hello!

I have two somewhat related questions about the kantorsite MathJax plugin. I posted a question here awhile ago asking how I could ensure that MathJax (via the kantorsite plugin) was made aware of a list of custom LaTeX macros whenever it renders tiddler content. Based on the suggestions in that thread, I defined a tiddler containing a macro of the form

<div style="display:none">
\define loadTeXcommands()
\(
    \(
        \def\macro1{...}

        \def\macro2{...}

        \def\macro3{...}

    ...
    \)
\)
\end
</div>

and added a custom "New Math Tiddler" button for the sidebar that creates a new tiddler whose body begins with <<loadTeXcommands>>. (The outer div ensures that calling loadTeXcommands doesn't lead to blank lines being added to the beginning of each tiddler.)

Question 1:

So far this solution works OK but it's definitely not ideal. In particular, my two major gripes with it are the following:

(1) When I load my TW5, the macros defined in loadTeXcommands are undefined until I manually open the tiddler containing the above code, edit it, and save it (and edit and save any math tiddlers were opened at startup).

(2) Inserting a <<loadTeXcommands>> line over and over again, into essentially every one of my tiddlers, instead of somehow defining these macros at startup and whenever MathJax is called to render a new tiddler seems like a bit of a kludge to me. The MathJax documentation indicates that this can be done by including a configuration file (or inline) when MathJax initializes, which brings me to my question for anyone more familiar with configuring MathJax and the kantorsite plugin: Is it feasible to tweak the plugin to include a (probably long) list of TeX macros (written in the "escaped", Javascript-friendly syntax mentioned in the MathJax documentation) whenever MathJax is loaded?

Question 2:

Another problem I'm having with the MathJax plugin from kantorsite is that it fails to render math inside, *e.g.*, a reveal widget when the contents of the widget starts out as hidden (or when it is manually hidden and then displayed again). This seems to be because the kantorsite plugin is queueing up MathJax to render tiddlers when they are initially loaded into the story river but not when their contents is changed "programatically" (that is, by a process other than editing and resaving the tiddler). Has anyone else out there found this to be a problem/found a fix for this? Alternatively, is there another MathJax plugin out there for TW5 that supports this?

Thanks in advance for any help you can provide! I'll be looking more into solving these problems if there aren't known solutions but figured it couldn't hurt to ask about these issues here first.

[Antonio Vargas]

Question 2:

Another problem I'm having with the MathJax plugin from kantorsite is that it fails to render math inside, *e.g.*, a reveal widget 

I used the following test and verified that the reveal widget works well with KaTeX plugin in common browsers. Unfortunately, I can use it only in a small percentage of my tiddlers (hundreds of tiddlers with lots of math expressions used at real time in the classroom). But, one day, it will match the power of MathJax (might take some time). I was surprised that mathML didn't work well in chrome. 

!Equation rendering in a reveal widget.

* Tested in Linux with:

** Firefox 32.0.3, Google Chrome 37.0.2062.120 and Opera 12.16.1860

* No Windows, no IE.

<hr/>

TEST 1: ''Chrome'': yes; ''Firefox'': yes; ''Opera'': yes (not perfect)<br/>

<$button set="$:/SampleRevealState1" setTo="show">Show ~KaTeX</$button>

<$button set="$:/SampleRevealState1" setTo="hide">Hide ~KaTeX</$button>

<$reveal type="match" state="$:/SampleRevealState1" text="show">

@@font-size:400%;line-height:100%;

$$\frac{1}{2}=0,5$$<br/>

@@

</$reveal>

<hr/>

TEST 2:  ''Chrome'': no; ''Firefox'':  no; ''Opera'': no<br/>

<$button set="$:/SampleRevealState2" setTo="show">Show ~MathJax</$button>

<$button set="$:/SampleRevealState2" setTo="hide">Hide ~MathJax</$button>

<$reveal type="match" state="$:/SampleRevealState2" text="show">

@@font-size:400%;line-height:100%;

$\frac{1}{5}=0,2$<br/>

@@

</$reveal>

<hr/>

 TEST 3: ''Chrome'': no; ''Firefox'': yes; ''Opera'': yes<br/>

<$button set="$:/SampleRevealState3" setTo="show">Show ~MathML</$button>

<$button set="$:/SampleRevealState3" setTo="hide">Hide ~MathML</$button>

<$reveal type="match" state="$:/SampleRevealState3" text="show">

@@font-size:400%;line-height:100%;

<math xmlns="http://www.w3.org/1998/Math/MathML">

  <mfrac>

    <mn>1</mn>

    <mn>2</mn>

  </mfrac>

  <mo>=</mo>

  <mfrac>

    <mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow>

    <mrow><mi>y</mi><mo>-</mo><mn>25</mn></mrow>

  </mfrac>

</math>

@@

</$reveal>

[Peter Krautzberger]

Hi,

Peter from the MathJax team here.

> Question 1

As you mentioned, the usual way (from a MathJax point of view) is to store your macros in a configuration/extension file and load this alongside any other configuration file.

Some pointers from our docs

* You already mentioned http://docs.mathjax.org/en/latest/tex.html#defining-tex-macros

* This explains the file structure: http://docs.mathjax.org/en/latest/extension-writing.html#extension-to-define-tex-macros 

* This explains how to load it with the CDN copy: http://docs.mathjax.org/en/latest/configuration.html#using-a-local-configuration-file-with-the-cdn. 

* And https://github.com/mathjax/MathJax-third-party-extensions for more examples.

> Question 2

I don't know TW unfortunately but it seems like 

line 3699: [...]   var n=document.getElementsByClassName('story-river')[0];t.observe(n,{subtree:false,attributes:true,childList:true}) [...]

looks like the place that needs modifying. Again, I don't know TW, but perhaps all that's needed is to add more DOM nodes that are then observed.

You might want to cross post to the MathJax User Group just in case.

Peter.

[DM]

Hi Antonio,

Thanks so much for the reply! It's great to hear that KaTeX has (based on your tests, if nothing else) a much tighter integration into the structure of TW5. While I don't think it's verbose enough in terms of its typesetting capacity for my needs at this point, I'll definitely be keeping an eye on its development.

For now, though, I will look into modifying the kantorsite plugin to support reveal widgets (and other transclusions/dynamic loading of content), since I want to use the reveal widget to hide large chunks of text (proofs, definition lists, etc.) in the body of my tiddlers that typically involve equations that for now seem either beyond the current scope of KaTeX or more difficult to typeset in it than MathJax (for a LaTeX user).

[DM]

Hi Peter,

Thanks for your reply. I had looked through the kantorsite code before and suspected that that was the problematic statement, but the vote of confidence from someone knowledgable about MathJax helped me a great deal. Thanks!

In other news, I think I've answered both of my questions! I've spent the afternoon learning more of the TW5 internals, refreshing myself on working with JSON, etc. and I now have a modified version of the MathJax plugin which supports (a) loading (specially-formatted for now) TeX commands from one or more tiddlers and includes them in the initial MathJax configuration script and (b) seems to work (hopefully without any major side effects) for reveal widgets and basically everything else in the story-river. I'd like to release it to GitHub once I've tested it a bit more to make sure that it's not horribly buggy (and to add some convenience features if time allows).

For those looking for a solution to (b), I simply changed the second argument of the mutation observer call (i.e., the list of things for it to monitor) that Peter mentioned to read "{subtree:true,attributes:true,childList:true}". So far it's working fine (no performance hit or bugs identified yet) for my relatively small TW5 file, but YMMV. As a bonus, this easy little fix also makes it so that when editing Tiddlers the preview pane will render MathJax in real time just like on stackexchange! So I'm a very happy camper.

Thanks again for the help! I will post in this group when I get around to uploading this to GitHub.

- Dan

[Antonio Vargas]

Dan and Peter

I''m impressed! This is an amazingly simple solution and very useful for me. I lost a lot of time seeking for other alternatives.

Many, many thanks.

AMFVargas

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/5RpqEcql0_E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.