Colored equations? (particularly compiling to HTML)

Colored equations? (particularly compiling to HTML)

[Gwern Branwen]

Has anyone found a good way to do annotated colored equations in Pandoc?

A Twitter thread (
https://twitter.com/kwinkunks/status/1232333955501826051 ) of examples
of colored equations like https://row1.ca/pixels-and-their-neighbors
with many implemented in Latex and/or Tikz (
http://www.texample.net/tikz/examples/ ). Rubricated* or colored
equations would be nice to have for Markdown->HTML and other formats.

In an earlier discussion of Pandoc->Docx (
https://groups.google.com/d/msgid/pandoc-discuss/aa5ab201-d3a6-44e2-807d-3f92a97f7a8b%40googlegroups.com
), John says that the texmath package doesn't support the necessary
TeX color library, so you can't simply write out color annotations in
native TeX expressions with $/$$.
People writing Latex->PDF presumably can just use that color library directly.

What other option have people tried?
One could write Latex or anything else and screenshot it as a figure,
but that's not too pleasant or editable.
Could one use the Tikz filter (
https://pandoc.org/lua-filters.html#building-images-with-tikz
https://github.com/jgm/pandocfilters/blob/master/examples/tikz.py
https://github.com/jgm/pandocfilters/blob/master/examples/tikz-sample.md
) or something much like it, to automatically generate a
figure/screenshot? It doesn't yield the same MathML or whatever, and
it might be a little tricky to integrate into Hakyll (unless one
inlined the image as a data-uri? it'd be relatively small).
That might be equivalent to
https://github.com/liamoc/latex-formulae#readme ** which generates
inline PNGs, and https://taeer.bar-yam.me/blog/posts/hakyll-tikz/
which generates inline SVGs.

* https://www.gwern.net/Red
** examples: http://liamoc.net/posts/2017-07-08-abstraction/index.html
http://liamoc.net/posts/2015-11-10-patch-theory/index.html ;
incidentally, he has some very impressive literate Agda code
implementation, examples in
http://liamoc.net/posts/2015-08-23-verified-compiler

-- 
gwern

Re: Colored equations? (particularly compiling to HTML)

[Gwern Branwen]

On Wed, Mar 18, 2020 at 11:27 PM Gwern Branwen <gwern-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> wrote:
> In an earlier discussion of Pandoc->Docx (
> https://groups.google.com/d/msgid/pandoc-discuss/aa5ab201-d3a6-44e2-807d-3f92a97f7a8b%40googlegroups.com
> ), John says that the texmath package doesn't support the necessary
> TeX color library, so you can't simply write out color annotations in
> native TeX expressions with $/$$.
> People writing Latex->PDF presumably can just use that color library directly.

So to follow this up more, the weakest link seems to be Texmath.

On the server-side end, the Latex 'xcolor' package is imported by
default by Pandoc, so anyone writing Markdown->PDF can just use colors
directly without even modifying the imports or anything:

https://bookdown.org/yihui/rmarkdown-cookbook/font-color.html

> For PDF, we can use the LaTeX command \textcolor{}{}. This requires the LaTeX package xcolor, which is included in Pandoc’s default LaTeX template.

Which is also confirmed by https://pandoc.org/MANUAL.html#creating-a-pdf

And on the other hand, on the client-side end, Mathjax also supports
color in equations:
https://docs.mathjax.org/en/latest/input/tex/extensions/color.html

> This extension is loaded automatically when the autoload extension is used. ...The color extension defines the \color macro as in the LaTeX color package, along with \colorbox, \fcolorbox, and \definecolor. It declares the standard set of colors (Apricot, Aquamarine, Bittersweet, and so on), and provides the RGB, rgb, and grey-scale color spaces in addition to named colors...in version 3 (and in LaTeX itself), you would do
>
> `{\color{red} x} + {\color{blue} y}`

So we have the situation that if you write Latex directly for Mathjax
in your final HTML, it works fine (example:
https://adereth.github.io/blog/2013/11/29/colorful-equations/ ), and
if you write Latex directly in your Markdown, it works fine by default
(for PDFs), but then it doesn't work at all* if you write Markdown for
HTML?

* I thought initially https://github.com/chdemko/pandoc-latex-color
might work but the README is confusing and it seems to be for the
special-case of colorizing body text, not equations, and for
Markdown->PDF only. There don't seem to be any other relevant filters
for color. So I suppose you would have to go the full-blown 'render
arbitrary LaTeX as SVG/PNG and inline' filter route in order to do
Markdown->HTML colorized equations?

-- 
gwern
https://www.gwern.net

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzotcqk5J0uHvp3YZqmfhmistbkbv7Mv-QLq5vqdbD7LQ%40mail.gmail.com.

Re: Colored equations? (particularly compiling to HTML)

[John MacFarlane]

If you use the --mathjax option, the math should be passed
directly through to the HTML, e.g.

% pandoc --mathjax -t html5
$\color{red}{x}$
<p><span class="math inline">\(\color{red}{x}\)</span></p>

So the texmath limitation shouldn't make any difference if you're
using MathJax.

Gwern Branwen <gwern-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> writes:

> On Wed, Mar 18, 2020 at 11:27 PM Gwern Branwen <gwern-v26ZT+9V8bxeoWH0uzbU5w@public.gmane.org> wrote:
>> In an earlier discussion of Pandoc->Docx (
>> https://groups.google.com/d/msgid/pandoc-discuss/aa5ab201-d3a6-44e2-807d-3f92a97f7a8b%40googlegroups.com
>> ), John says that the texmath package doesn't support the necessary
>> TeX color library, so you can't simply write out color annotations in
>> native TeX expressions with $/$$.
>> People writing Latex->PDF presumably can just use that color library directly.
>
> So to follow this up more, the weakest link seems to be Texmath.
>
> On the server-side end, the Latex 'xcolor' package is imported by
> default by Pandoc, so anyone writing Markdown->PDF can just use colors
> directly without even modifying the imports or anything:
>
> https://bookdown.org/yihui/rmarkdown-cookbook/font-color.html
>
>> For PDF, we can use the LaTeX command \textcolor{}{}. This requires the LaTeX package xcolor, which is included in Pandoc’s default LaTeX template.
>
> Which is also confirmed by https://pandoc.org/MANUAL.html#creating-a-pdf
>
> And on the other hand, on the client-side end, Mathjax also supports
> color in equations:
> https://docs.mathjax.org/en/latest/input/tex/extensions/color.html
>
>> This extension is loaded automatically when the autoload extension is used. ...The color extension defines the \color macro as in the LaTeX color package, along with \colorbox, \fcolorbox, and \definecolor. It declares the standard set of colors (Apricot, Aquamarine, Bittersweet, and so on), and provides the RGB, rgb, and grey-scale color spaces in addition to named colors...in version 3 (and in LaTeX itself), you would do
>>
>> `{\color{red} x} + {\color{blue} y}`
>
> So we have the situation that if you write Latex directly for Mathjax
> in your final HTML, it works fine (example:
> https://adereth.github.io/blog/2013/11/29/colorful-equations/ ), and
> if you write Latex directly in your Markdown, it works fine by default
> (for PDFs), but then it doesn't work at all* if you write Markdown for
> HTML?
>
> * I thought initially https://github.com/chdemko/pandoc-latex-color
> might work but the README is confusing and it seems to be for the
> special-case of colorizing body text, not equations, and for
> Markdown->PDF only. There don't seem to be any other relevant filters
> for color. So I suppose you would have to go the full-blown 'render
> arbitrary LaTeX as SVG/PNG and inline' filter route in order to do
> Markdown->HTML colorized equations?
>
> -- 
> gwern
> https://www.gwern.net
>
> -- 
> You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gzotcqk5J0uHvp3YZqmfhmistbkbv7Mv-QLq5vqdbD7LQ%40mail.gmail.com.

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/m28sdlv4ys.fsf%40MacBook-Pro.hsd1.ca.comcast.net.

Re: Colored equations? (particularly compiling to HTML)

[Gwern Branwen]

Hm... Yes, that does seem to work with pure Mathjax, and is also
compatible with Hakyll and https://github.com/pkra/mathjax-node-page/
. Since I'm not sure if the MathML route gains me anything, inasmuch
as it's rendered by Mathjax statically anyway, I think that's the best
option for colored equations for Markdown->HTML.

-- 
gwern
https://www.gwern.net

Advanced equation typesetting, "Nota" Re: Colored equations? (particularly compiling to HTML)

[Gwern Branwen]

Will Crichton has a demo of an advanced equation system he calls
"Nota" https://willcrichton.net/nota/ It is currently Tex/HTML-centric
https://github.com/willcrichton/nota but he has some prototype code
for Markdown version
https://github.com/willcrichton/nota/tree/master/packages/nota-markdown
and so what his system does might be of interest.

> "A New Medium for Communicating Research on Programming Languages", Will Crichton
>
> Papers about programming languages involve complex notations, systems, and proofs. Static PDFs offer little support in understanding such concepts. I describe Nota, a framework for academic papers that uses the browser's interactive capabilities to support comprehension in context. Nota uses hover effects, tooltips, expandable sections, toggleable explanations, and other interactions to help readers understand a language's syntax and semantics. I demonstrate the use of Nota by rewriting a PL paper using its primitives, and also by writing this paper in Nota.

Nota supports most of the usual typography and conveniences like SVG
or margin notes, but the important part is the syntax highlighting for
math.

The basic idea is to annotate equation elements with popup
capabilities, pointing to their definition in the body text. Any
variable 't' can be linked to its definition in the text as being "the
time variable" etc. The definitions themselves may use defined
elements, and can be popped up again, and so on. Because the equations
are parsed into the elements instead of being opaque TeX expressions
or PNG raster images, they can be colored for syntax highlighting of
English vs math: hover over a purple-underlined variable $\pi~mut~$
and and the purple-underlined phrase ' of what the reference
points-to.' is highlighted. (He could color the whole text but that
can lead to issues with readability.)

For kicks, it can run sandboxed code server-side so you can edit Rust
code inside the page, and run it to see the results.

Pretty neat, and worth a look.

--
gwern

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAMwO0gy8VefAFb2SuddrH97W9ChR4wiDdxSAvLogG23R268QMQ%40mail.gmail.com.