Inline calculations with math.js

[josdejong]

The LaTeX integration in stackedit is really awesome. I had a talk with someone who came up with an other similar idea: having support for inline mathematical calculations. This should be relatively easy to do using math.js. math.js can export expressions to LaTeX (see this example), so that can give interesting opportunities.

Various options that come in mind:

• have both inline expressions as well as fenced expression blocks
• be able to either output only the result of an expression, or output both expression and result. In the latter case, you could chose to output the expression as plain text or as formatted LaTex.

I'm the main developer of math.js, so if there is extra functionality needed for a seamless integration please let me know.

[pvilas]

For math notepads, there are certainly a lot of solutions like ipython but they are too complicated for the mean student or people that only need to convey some ideas or even to write an entry on his blog with some graphics. In these cases, editor solutions like stackedit will be greatly improved.

[benweet]

@josdejong Is there any math.js integration example in an existing markdown editor?

And more technically, are math.parse and math.eval safe against XSS attacks?

[josdejong]

There is no markdown editor that I know of that integrates math.js or an other expression parser.

Yes, the parser should be safe against XSS attacks (math.js has it's own parser, doesn't use JavaScript eval). To be honest I should extensively test this to see if there are no backdoors (Anyone interested in trying to hack it...?). Of course a GUI displaying the results of an expression should be safe against XSS too: math.eval('"alert(\'hacked!\')"') returns a string 'alert(\'hacked!\')', which should not be parsed by the browser.

Before implementing something like this it may be a good idea to get a clear view on what audience would be interested. Maybe this markdown+latex+mathjs combination mostly resembles MathCad, where you write a document with interactive maths inside it.

[benweet]

Actually, in my mind, it should be implemented just like links or footnotes, something like:

Pretty print: [$expr]
Result: ![$expr]

  [$expr]: sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2

Or directly:

Pretty print: [$ sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2 $]
Result: ![$ sqrt(75 / 3) + det([[-1, 2], [3, 1]]) - sin(pi / 4)^2 $]

And eventually, it could be nested like this:

  [$expr1]: sqrt([$expr2], 2)

What do you think? Also, is there any point to have expression blocks?

[josdejong]

Thanks for your thoughts Benoit. Thinking about applications for interactive maths in documents I can think of educational purposes like writing a report containing calculations which you want to have updated automatically when you change variables and expressions anywhere in the doc. I think you will mostly inline calculation results and formulas, so I think your "direct" example will be most useful. I'm not sure whether a footnote or nested expressions will be useful in practice.

I think there are three options for the output:

• Pretty print the expression only (same as LaTeX except with ASCII math expressions instead of LaTeX expressions)
• Pretty print expression with result
• Print result only

I don't have a strong opinion on what separators math expressions should have, but of course it shouldn't interfere with other markdown syntax. A prefix ! to just show the result sounds intuitive to me, it's similar to replacing an image url with the image.

Your direct solution looks great. Some more ideas just as a brainstorm:

1. your suggestion [$ 2+3 $] (expression only) and ![$ 2+3 $] (result only)
2. use the percent sign % 2+3 % (expression only) and !% 2+3 % (result only). This may conflict with some latex extensions for markdown?
3. if you see a math expression as code, we could use backticks with a math prefix inside,
   like math 2+3 (expression only), !math 2+3 `` (result only)
4. ugly and verbose, but we could use html tags: <math>2+3<math>, <math expression="true" result="true">2+3<math>

I like 1 or 2 most, but I don't really have an idea how to denote this third option (having output being either expr+result, expr, or result). Maybe a double exclamation mark as prefix !! to output both expression and result?

As for the expression blocks, these can be useful in the following cases:

# spread long expressions over multiple lines
a = sqrt(75 / 3) + 
  det([[-1, 2], [3, 1]]) - 
  sin(pi / 4)^2

# spread matrices over multiple lines 
m = [
  1, 2, 3;
  4, 5, 6
]

# in the future math.js will get fully fledged scripting support (loops, functions, etc)

[pvilas]

Is there any chance to have some basic plots?. Or this will be too much for a first round.

[Daniel-Hug]

:+1: I use StackEdit as a math/physics worksheet all the time.

[cben]

On Thu, Aug 28, 2014 at 2:52 PM, Benoit Schweblin notifications@github.com wrote:

@josdejong https://github.com/josdejong Is there any math.js integration example in an existing markdown editor?

It's not a web editor but there is calculation-in-markdown precedent in http://calca.io/

[benweet]

Interesting. It looks like calca calculates the result directly in the editor. I don't really want the editor to be "dynamic" though, having the result in the preview is much easier to implement..