Dyalog Forums • MathJax and miserver

Page 1 of 2

MathJax and miserver

Posted: Thu Nov 02, 2017 9:24 pm

by bwyork67

Has anyone used MathJax on an miPage?

Re: MathJax and miserver

Posted: Sun Nov 05, 2017 11:33 pm

by bwyork67

I finally got MathJax going with miserver 3.0. My problems occurred when I tried
to modify the Config/Resources.xml file to have MathJax scripts added to <head>.
and I tried to keep my MathJax directory in the site directory. By moving the MathJax
directory to a miserver subdirectory and adding a virtual path and including my MathJax
scripts in the <body>, it all worked.

Re: MathJax and miserver

Posted: Mon Nov 06, 2017 12:08 am

by Brian|Dyalog

I'm glad you got this working. I don't have any experience with MathJax, but MiServer was designed to make it easy to add your own resources. We discourage people from modifying the files in the MiServer folder structure because it may cause issues down the road if you update your MiServer installation.

You should have been able to define resources that are located in your MiSite's folder structure. Typically the way I would do this is to...

In [misite]/Config/

create Virtual.xml

Code: Select all

<Virtual>
  <directory>
    <alias>MathJax</alias>
    <path>%SiteRoot%/MathJax/</path>
  </directory>
</Virtual>

create Resources.xml

Code: Select all

<Resources>
   <resource>
      <name>MathJax</name>
      <script>/MathJax/MathJax.js?config=TeX-MML-AM_CHTML</script>
   </resource>
</Resources>

Download and unzip MathJax into your a folder named MathJax in your MiSite
Then whenever you want to use MathJax in a MiPage, just include in the Compose method
Code: Select all
```
Use 'MathJax'
```

If that doesn't work, let me know.

I hope this helps!
/Brian

Re: MathJax and miserver

Posted: Mon Nov 06, 2017 9:01 pm

by bwyork67

Brian

Thx. That is what I tried first, with one exception. I did not include a
"use MathJax" in my mipage.. Maybe, that was the problem. I will try your solution.

What does work is putting MatJax in the miserver folder and
adding the MathJax scripts to the <body> of my mipage. I add the MathJax virtual directory in the site's virtual.xml.

Bryant

Re: MathJax and miserver

Posted: Mon Nov 06, 2017 9:01 pm

by bwyork67

Brian

Thx. That is what I tried first, with one exception. I did not include a
"use MathJax" in my mipage.. Maybe, that was the problem. I will try your solution.

What does work is putting MatJax in the miserver folder and
adding the MathJax scripts to the <body> of my mipage. I add the MathJax virtual directory in the site's virtual.xml.

Bryant

Re: MathJax and miserver

Posted: Mon Nov 06, 2017 9:11 pm

by bwyork67

Brian

Tried your prescription. I get a msg indicating "unable to load from a local directory.
I have to look up the setting for allowing the server to access a local directory.

Bryant

Re: MathJax and miserver

Posted: Tue Nov 07, 2017 6:44 am

by Brian|Dyalog

Hi Bryant,

Putting a <script> element in your page is perfectly acceptable way to accomplish what you want. I looked a bit more at MathJax and I see that they have various query string parameters for the JavaScript file depending on which technologies (TeX, LaTeX, MathML, AsciiMath, etc) you want to use to render your math symbols.

I downloaded MathJax and started to experiment and discovered that I hadn't provided support for resources with query strings. I've just updated MiServer 3.0 to allow them. You can grab it from the "master" branch of the MiServer GitHub repository.

I created a small MiSite to test MathJax locally.
First I created my home directory (in this case c:\bb\mathjax\) with the following folder structure:

Code: Select all

c:\bb\mathjax\Config\Resources.xml
c:\bb\mathjax\Config\Virtual.xml
c:\bb\mathjax\MathJax\ (here is where I unzipped MathJax)
c:\bb\mathjax\index.mipage

Resources.xml contains:
Notice that I defined the resource for using AsciiMath, I could define other resources if I wanted to use different math markup technologies.

Code: Select all

<Resources>
<!-- 
******************************
*     MathJax resources      *
******************************
-->
   <resource>
      <name>MathJax-AsciiMath</name>
      <script>/MathJax/MathJax.js?config=AM_CHTML</script>
   </resource>
</Resources>

Virtual.xml contains:

Code: Select all

<Virtual>
  <directory>
    <alias>MathJax</alias>
    <path>%SiteRoot%/MathJax/</path>
  </directory>
</Virtual>

I wrote a very simple MiPage to test.

Code: Select all

:Class index : MiPage
    ∇ Compose
      :Access Public
      Use'MathJax-AsciiMath'
      Add'`sum_(i=1)^n i^3=((n(n+1))/2)^2`'
    ∇
:EndClass

Finally, I load the MiServer workspace, type Start 'c:\bb\mathjax', navigate to the page, and it seems to display properly.

I hope this helps!
/Brian

Re: MathJax and miserver

Posted: Wed Nov 08, 2017 5:17 pm

by bwyork67

Hi Brian

I just tried your revised approach and it seems to work with ASCII math but not with
Tex/Latex. For Tex/Latex I would like the additional configuration of the tex2jax processor.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
</script>

I believe the tex2jax processor makes a pass over the page after the html gets generated.
I got things to work by forcing mathjax to process the latex with the following scripts

But, I got it to work without the additional configuration. This means I cannot use
$..$ or $$..$$ for inline and display math.

Add _.body'<script type="text/javascript" src="mathjax/MathJax.js"></script>'
Add _.body'<script type="text/javascript" src="mathjax/config/TeX-AMS_HTML-full.js"</script>'
f1.Add _.div'<p><script type="math/tex">\frac{2}{3}+\sqrt{1-x^2}\hspace{5mm}</script></p>'
f1.Add _.div'<script type="math/tex">\begin{align}\dot{x} & = \sigma(y-x) \\\dot{y} & = \rho x - y - xz \\\dot{z} & = -\beta z + xy\end{align}</script>'

I previously created a form named 'f1'

In my application I need to have the user type Latex into an input field, grab the
text and push it through the tex2jax processor and display the formatted math
in an output field. I will want to be able to do this in a RESTful fashion. In this
model it seems the MathJax directory must be at ServerRoot.

Bryant

Re: MathJax and miserver

Posted: Wed Nov 08, 2017 5:30 pm

by bwyork67

Brian

I got your model to work with tex2jax processor and MathJax at SiteRoot instead of
ServerRoot.

Thanks

Bryant

Re: MathJax and miserver

Posted: Wed Nov 08, 2017 9:30 pm

by Brian|Dyalog

Hi Bryant,

I'm glad you're getting things to work. Yeah, my example indicated that you should use %SiteRoot% to point to MathJax.

I was looking at the way you're generating your HTML content. You're using a mixture of the MiServer framework and raw HTML. You can do that obviously, since it works :). But let me share couple techniques/thoughts...

You should never have to Add _.body (or _.head for that matter) - a MiPage already has those elements and knows where to add your content. So, your expression

Code: Select all

Add _.body'<script type="text/javascript" src="mathjax/MathJax.js"></script>

could be written as

Code: Select all

Add _.Script '' 'mathjax/MathJax.js'

Note that I'm using the Dyalog _.Script control and not the raw HTML5 _.script control. The HTML5 controls are all lowercase; Dyalog and other controls are mixed case. The reason I use _.Script is so that I can pass the src parameter as an argument. Otherwise, if I was using _.script I would write it as:

Code: Select all

(Add _.script).Set 'src' 'mathjax/MathJax.js'
or
(⊂'src' 'mathjax/MathJax.js') Add _.script

Similarly, you're adding a <script> to a <p> to a <div> to your f1 <form>.

Code: Select all

f1.Add _.div'<p><script type="math/tex">\frac{2}{3}+\sqrt{1-x^2}\hspace{5mm}</script></p>'

This could be written as

Code: Select all

(((f1.Add _.div).Add _.p).Add _.script '\frac{2}{3}+\sqrt{1-x^2}\hspace{5mm}').type←'math/tex'
or
(⊂'type' 'math/tex')((z.Add _.div).Add _.p).Add _.script '\frac{2}{3}+\sqrt{1-x^2}\hspace{5mm}'

If you're likely to build multiple pages using MathJax, or you simply like modularity, MiServer allows to build your own templates and components. I tinkered a bit and built a simple TeX/LaTeX component and template.

First, I added a resource in /Config/Resources.xml so I can use TexLaTeX.

Code: Select all

<Resources>
<!-- 
******************************
*     MathJax resources      *
******************************
-->
   <resource>
      <name>MathJax-AsciiMath</name>
      <script>/MathJax/MathJax.js?config=AM_CHTML</script>
   </resource>
   <resource>
      <name>MathJax-TeX/LaTeX</name>
      <script>/MathJax/MathJax.js?config=TeX-AMS_HTML-full</script>
   </resource>
</Resources>

Then I created a Tex/Latex template called TeXPage, based on the MiPage class. Templates need to be located in your MiSite's /Code/Templates/ folder.

TeXPage.dyalog

Code: Select all

:Class TeXPage : #.MiPage
    ∇ {r}←Wrap
      :Access Public
      Use'MathJax-TeX/LaTeX'
      'type=x-mathjax-config'Head.Insert _.Script ScriptFollows
⍝  MathJax.Hub.Config({
⍝    extensions: ["tex2jax.js"],
⍝    jax: ["input/TeX", "output/HTML-CSS"],
⍝    tex2jax: {
⍝      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
⍝      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
⍝      processEscapes: true
⍝    },
⍝    "HTML-CSS": { availableFonts: ["TeX"] }
⍝  });
      r←⎕BASE.Wrap
    ∇
:EndClass

The first thing the template does is Use 'MathJax-TeX/LaTeX', so you don't need to do it in each of your pages. Then we insert the configuration script - we use Insert instead of Add in order to force the configuration script to be loaded first. You'll also note that here's one case where we explicitly use Head.Insert to make sure the script is loaded in the <head> element AND before MathJax.js.

The next thing I did was to write a TeX component based on #._html.script (_.script).

TeX.dyalog

Code: Select all

:Class TeX : #._html.script
    :Field public inline←¯1
    :Field public displayed←¯1

    ∇ Make0
      :Access public
      :Implements constructor
    ∇

    ∇ Make1 params
      :Access public
      :Implements constructor :base params
    ∇

    ∇ r←Render
      :Access public
      :If UNDEF≡type
          type←'math/tex'
          :If (inline=0)∨displayed=1
              type,←'; mode=display'
          :EndIf
      :EndIf
      r←⎕BASE.Render
    ∇
:EndClass

The default mode is inline. I defined two parameters, inline and displayed where either can be set to indicate that the equation is a displayed (not inline) equation by setting inline to 0 or displayed to 1.

Finally, I put it all together in a simple MiPage (actually a TeXPage)...

tex.mipage

Code: Select all

:Class tex : TeXPage

    ∇ Compose
      :Access Public
      :With (Add _.div).Set'style' 'width:500px;border-style:solid;padding:10px;'
          Add'This is an inline equation '
          Add #.TeX'x+\sqrt{1-x^2}'
          Add _.br
          Add'Whereas this is a displayed (centered on its own line) equation '
          (Add #.TeX'x+\sqrt{1-x^2}').displayed←1
      :EndWith
    ∇

:EndClass

So now, whenever I want to use TeX/LaTeX, I just use Add #.TeX.

As far as accepting input from a form and returned the equation, that shouldn't be very difficult - it could be done entirely on the client side, or with a callback to MiServer. When you say you'd like to turn it into a RESTful service, what do you envision? How would it be invoked, what would the returned data be?

I've uploaded my MathJax MiSite to the MiSites GitHub repository.

I hope this helps!
/Brian