MathJax and miserver
15 posts
• Page 1 of 2 • 1, 2
Re: MathJax and miserver
by bwyork67 on Sun Nov 05, 2017 11:33 pm
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.
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.
- bwyork67
- Posts: 13
- Joined: Tue Nov 12, 2013 7:01 pm
Re: MathJax and miserver
by Brian|Dyalog on Mon Nov 06, 2017 12:08 am
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...
I hope this helps!
/Brian
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>
- create Virtual.xml
- 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'
I hope this helps!
/Brian
-
Brian|Dyalog - Posts: 116
- Joined: Thu Nov 26, 2009 4:02 pm
- Location: West Henrietta, NY
Re: MathJax and miserver
by bwyork67 on Mon Nov 06, 2017 9:01 pm
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
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
- bwyork67
- Posts: 13
- Joined: Tue Nov 12, 2013 7:01 pm
Re: MathJax and miserver
by bwyork67 on Mon Nov 06, 2017 9:01 pm
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
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
- bwyork67
- Posts: 13
- Joined: Tue Nov 12, 2013 7:01 pm
Re: MathJax and miserver
by bwyork67 on Mon Nov 06, 2017 9:11 pm
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
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
- bwyork67
- Posts: 13
- Joined: Tue Nov 12, 2013 7:01 pm
Re: MathJax and miserver
by Brian|Dyalog on Tue Nov 07, 2017 6:44 am
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:
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.
Virtual.xml contains:
I wrote a very simple MiPage to test.
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
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
-
Brian|Dyalog - Posts: 116
- Joined: Thu Nov 26, 2009 4:02 pm
- Location: West Henrietta, NY
Re: MathJax and miserver
by bwyork67 on Wed Nov 08, 2017 5:17 pm
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
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
- bwyork67
- Posts: 13
- Joined: Tue Nov 12, 2013 7:01 pm
Re: MathJax and miserver
by bwyork67 on Wed Nov 08, 2017 5:30 pm
Brian
I got your model to work with tex2jax processor and MathJax at SiteRoot instead of
ServerRoot.
Thanks
Bryant
I got your model to work with tex2jax processor and MathJax at SiteRoot instead of
ServerRoot.
Thanks
Bryant
- bwyork67
- Posts: 13
- Joined: Tue Nov 12, 2013 7:01 pm
Re: MathJax and miserver
by Brian|Dyalog on Wed Nov 08, 2017 9:30 pm
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
could be written as
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:
Similarly, you're adding a <script> to a <p> to a <div> to your f1 <form>.
This could be written as
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.
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
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
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
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
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
-
Brian|Dyalog - Posts: 116
- Joined: Thu Nov 26, 2009 4:02 pm
- Location: West Henrietta, NY
15 posts
• Page 1 of 2 • 1, 2
Who is online
Users browsing this forum: No registered users and 1 guest
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group