Support for stem macro/mathjax?

[kbisceglia]

Hi,
So far I've really been enjoying Asciidoc and the Atom live previewer - thank you for building and maintaining it! So far, the one thing I can't get it to do is render math via the stem command, as described in the manual.

For example, this piece of sample text won't render as math in Atom, but it will via the command line.

What I'd love to do is access mhchem.js in Mathjax through Asciidoc, but I understand that's not yet possible without a kludge (e.g., \require{mhchem} rendered as math).

Thanks, Kevin

[mojavelinux]

We have this working now in the Chrome extension, which is the same technology stack as the Atom preview. Therefore, it shouldn't be too much of a stretch to add support for it. It's really just a matter of adding the necessary MathJax script import and configuration. The rest is handled by MathJax.

[kbisceglia]

Glad to hear that it wouldn’t be too difficult to implement – hopefully it will make it into the next release. I’m a novice when it comes to such things, but Asciidoc(tor) appears to have far more potential than markdown as a scholarly markup language. I’m very happy to have learned about it. Thanks again for your efforts.

On 5/17/15, 6:40 PM, "Dan Allen" <[email protected]mailto:[email protected]> wrote:

We have this working now in the Chrome extension, which is the same technology stack as the Atom preview. Therefore, it shouldn't be too much of a stretch to add support for it. It's really just a matter of adding the necessary MathJax script import and configuration. The rest is handled by MathJax.

— Reply to this email directly or view it on GitHubhttps://github.com/asciidoctor/atom-asciidoc-preview/issues/94#issuecomment-102866556.

[mojavelinux]

Asciidoc(tor) appears to have far more potential than markdown as a scholarly markup language.

We certainly think so. Glad to hear you share that view!

[prudhomm]

@mojavelinux how about katex support in atom-asciidoc-preview? as in markdown-preview-katex ?

[mojavelinux]

That's a possibility, but there are two limitations. First, it won't be able to handle AsciiMath, whereas MathJax can (as I understand it). Second, I've heard the LaTeX support is not quite as complete as MathJax. It's possible both of these assumptions are out of date.

[mojavelinux]

I'd also rather not have divergent implementations. If we decided to use KaTeX, then I'd want to switch core to it as well. Otherwise, it becomes a lot of different things to maintain. So, unless MathJax is unusable (which I don't forsee), I'd rather stick with MathJax.

Keep in mind there is precedent for using MathJax with Asciidoctor.js as it works in both Docgist and the Chrome extension.

[kindlychung]

What is the current status of this? I would very much like to have this feature, I could even contribute if someone guide me a bit. Thanks!

[mojavelinux]

I think it's just a matter of invoking the MathJax API once the preview page is loaded (or refreshed). Here's the code for loading the MathJax API:

https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/converter/html5.rb#L226-L241

I would recommend making MathJax a separate Atom package and activating the stem support if it is detected.

[kindlychung]

The mathjax part seems to be done already: https://atom.io/packages/mathjax-wrapper

How do I go about and activate it when there is a [stem] or (stem:)?

[mojavelinux]

The mathjax part seems to be done already

Excellent news!

How do I go about and activate it when there is a [stem] or (stem:)?

I guess using the atom packages API. Perhaps https://atom.io/docs/api/v1.7.0/PackageManager#instance-isPackageActive? If so, then it's necessary to inject the MathJax script and invoke it somewhere around https://github.com/asciidoctor/atom-asciidoc-preview/blob/master/lib/asciidoc-preview-view.coffee#L147

[kindlychung]

I have tried the simplest approach: https://github.com/kindlychung/atom-asciidoc-preview/blob/kindlychung-patch-mathjax/lib/asciidoc-preview-view.coffee#L144-L169

But that hasn't been successful at all, I mean, there has been no visible effect. Could anyone help? (I haven't written a single line of coffeescript before, 😄 )

[prudhomm]

For scientific or technical writing where math support is needed, the previewer is not useful unfortunately without math/stem support. What is the current state of affairs ?

[mojavelinux]

It's just a matter of porting the logic from the Chrome extension to the Atom package and working out some integration differences. So I'd say the theory has been completed...we just need to move to implementation.

[mojavelinux]

@Mogztter, is there any knowledge you could share for someone who wishes to implement this?

[chifaadahik]

what is the status of math support ? I agree that when we have quite a bit of mathematics, the previewer is not so useful because the mathematica expressions are not shown . Otherwise , for regular texts, the previewer works like a charm , thanks a lot

[ggrossetie]

@kindlychung You can have a look at the Chrome Extension. I'm using the following configuration: app/vendor/MathJax/config.js before loading MathJax with ?config=TeX-MML-AM_HTMLorMML. I'm also using the following code to refresh/reload MathJax (at the bottom of the page):

if (window.MathJax) {
  window.MathJax.Hub.Typeset();
}

[catethos]

I manage to render the latex in a very hacky way. Appreciate if anyone can point me to the correct direction.

What I have done:

1. put the MathJax folder inside the Atom.app/contents/Resources/app/static
2. insert the line <script src="MathJax/MathJax.js?config=TeX-MML-AM_CHTML"></script> into Atom.app/contents/Resources/app/static/index.html
3. insert the line window.MathJax.Hub.Typeset() into the file asciidoc-preview-view.coffee

Just to show that it works

[ldez]

@catethos The non "hacky" way is to use NPM modules: https://www.npmjs.com/package/mathjax

[slaanco]

@Idez Could you provide more detailed instruction? Simply installing mathjax via npm does not seem sufficient. Thank you! :-)

[pnogas]

@ldez I second slaanco's comment. @catethos I can't find a static folder. I see /Applications/Atom.app/Contents/Resources/app/apm/node_modules/npm/html/static Is this path different on macs?

sorry for my weak Atom skills...

[ldez]

@slaanco @pnogas you need to modify the real code of the package, just download the MathJax is not sufficient 😃

[pnogas]

@ldez I figured that. Unfortunately my knowledge how to modify the real code is lacking.

[sylvaticus]

Hello, any timetable for the implementation of LaTex-style equations in asciidoc preview (and then -> pdf or ->html) ?

I know nothing about ruby, gem, stem, npm, MathJax, etc, but I understood (maybe wrongly) that it is a matter of replicate the functionality already available in other contexts to the Atom asciidoc plugin...

EDIT: I managed to get @catethos third note: "insert the line window.MathJax.Hub.Typeset() into the file asciidoc-preview-view.coffee" (in Linux: ~/.atom/packages/asciidoc-preview/lib/asciidoc-preview-view.coffee) - and I guess this is the point of @Idez "you need to modify the real code of the package".

I do however miss how to install MathJax in the first instance. I can not retrieve the folder Atom.app/contents/Resources/app/static cited by @cathetos and, on the other side, installing MathJax using apt-get install npv; npm install mathjax doesn't seem to provide any effect.

[jfernandz]

Well, I would like to know how is the status of this 2015 issue; I mean, I've read it all and I neither cannot locate the Atom.app/contents/Resources/app/static; even looking my package files located in /usr/share/atom/ mainly. I can Imagine that maybe you are talking about a folder regarding to your app documentation, I mean in which you are working at that moment. But I don't really work on an application, I'm just taking notes in a single .adoc file.

Moreover I don't know which would be the best way to face the issue, using npm to install the mathjax module? and where? Inside your current working directory (that one where your developing app is stored; as I've said before)? As I've said ... I have not an app itself, I'm just using a simple .adoc file to take notes. What about the Atom package I have not a clue on how to use that one. My distro also provides a native MathJax package which I guess I could be useful also.

I guess in all cases you will need to modify the atom-asciidoc-preview in the way that @catethos suggest:

insert the line window.MathJax.Hub.Typeset() into the file asciidoc-preview-view.coffee

Is that right?

Finally, I cannot omit that I would prefer a native implementation of this MathJax features in your Atom extension. I think that is truly needed. If I can help in some way ... I'm willing to do it but like the rest of the people in the issue, I've not ever written coffescript.

[xrayn]

On Arch Linux I did the following to get it MathJax to work properly.

mkdir /opt/mathjax cd /opt/mathjax sudo npm install mathjax@2

NOTE: Do not use npm install inside of /usr/lib/atom/node_modules/. For me it deleted necessary packages.

sudo vim file:///usr/lib/atom/static/index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src * atom://*; img-src blob: data: * atom://*; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src blob: data: mediastream: * atom://*;">
  <script src="index.js"></script>
  <script src="/opt/mathjax/node_modules/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body tabindex="-1">
</body>
</html>`

NOTE: Alternatively, you can also use the directory ~/.atom/packages/asciidoc-preview/node_modules

Then edit ~/.atom/packages/asciidoc-preview/lib/asciidoc-preview-view.coffee and add MathJax.Hub.Typeset()

  renderAsciiDocText: (text) ->
    renderer.toHtml text, @getPath()
      .then (html) =>
        @loading = false
        @html(html)
        @enableAnchorScroll html, (top) =>
          @scrollTop top

        @emitter.emit 'did-change-asciidoc'
        @originalTrigger('asciidoc-preview:asciidoc-changed')
        MathJax.Hub.Typeset()

btw, it should be trivial for someone with some nodejs knowledge to add mathjax support inside the previewer itself.

After installing mathjax in ~/.atom/packages/asciidoc-preview/node_modules one can add it via mathjax = require 'mathjax' in ~/.atom/packages/asciidoc-preview/lib/asciidoc-preview-view.coffee It gets loaded and can be used within the developer JS console via window.MathJax The problem here is that I could not figure out a simple way how to properly initialize the configuration like MathJax.js?config=TeX-MML-AM_CHTML. I think this is mainly because I know nothing about nodejs/coffescript. :(

[GeBuCz]

I recognized that asciidoc with Atom should be ideal system for writing documentation for me, but formulas is very needed :(.

[wimcnice]

Hi I tried adding :stem: to asciidoc documents and the inline stem block, but the preview does not show any math. I also tried the above Inpm install and modify the asciidoc-preview-view.coffe but it does not work. Has anyone been able to make this work?

[MeelisFHg]

I have Windows8 and also tried to hack mathjax to work. Had some luck, but only with saving to HTML.

Find your asciidoc-preview folder, namely file C:\Users\<user>\.atom\packages\asciidoc-preview\templates\default.html

and add one for line to the scripts, for example: <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

After that in the HTML file you will see latexmath:[x^2 + y^2 = z^2] converted.

Now, the other main goal was to get preview working. There I had no luck. Managed to install mathjax. Also added MathJax.Hub.Typeset() to the .coffee file, @xrayn posted. But where I fail is in adding the <script > line to the index.html file. After much searching and using the Developer console, I think I finally found the right place. Namely file:///C:/Users/<user>/AppData/Local/atom/app-1.58.0/resources/app.asar/static/index.html

But This file is in a .asar "zipped" file. Tried various ways to unzip and rezip it, but seems one would have to use a electron packager to get it packaged properly again. Does anyone have ideas, alternatives. Where one could put this modified index.html so that I would not need to repackage the app.asar contents?

Also, in the last line of asciidoc-preview readme, there is "Thanks to @kevinsawicki for inspiration markdown-preview." Would like to reference to "markdown-preview-enhanced" https://github.com/shd101wyy/markdown-preview-enhance, where the same mathjax is successfully supported. ;)