Avoid dollar symbol inline math (#194)

Inline math via dollar symbols can conflict with using dollar symbols
for representing dollars. Fixing this by escaping dollars is not an
option since it is hard to run KaTeX and unescape dollars in Javascript
(see also #193). So
instead of fixing the dollars for representing currency, this patch
fixes the dollar for representing inline math by converting the dollars
to `\(` and `\)`. This is also how Franklin.jl handles it. In other
words, Franklin.jl also converts dollar symbols for inline math to `\(`
and `\)`.

## Tasks

- [x] Add test to verify that Pluto.jl returns `<span
class="tex">$x$</span>` for `$x$`.
- [x] Verify that Documenter.jl also interprets `\(` and `\)` as inline
math.

docs/src/index.md

@@ -66,6 +66,32 @@ For `output_format=franklin_output` examples, see
 - [My blog](https://gitlab.com/rikh/blog).
     For example, a post on [random forests](https://huijzer.xyz/posts/random-forest/).
 
+Specifically, use the following KaTeX options:
+
+```javascript
+const options = {
+  delimiters: [
+    {left: "$$", right: "$$", display: true},
+    {left: "\\begin{equation}", right: "\\end{equation}", display: true},
+    {left: "\\begin{align}", right: "\\end{align}", display: true},
+    {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
+    {left: "\\begin{gather}", right: "\\end{gather}", display: true},
+    {left: "\\(", right: "\\)", display: false},
+    {left: "\\[", right: "\\]", display: true}
+  ]
+};
+
+document.addEventListener('DOMContentLoaded', function() {
+  renderMathInElement(document.body, options);
+});
+```
+
+Note that `$x$` will not be interpreted as inline math by this KaTeX configuration.
+This is to avoid conflicts with using the dollar symbol to represent the dollar (currency).
+Instead, `PlutoStaticHTML.jl` automatically converts inline math from `$x$` to `\($x\)`.
+With above KaTeX settings, `Franklin.jl` will interpret this as inline math.
+By default, `Documenter.jl` will also automatically interpret this as inline math.
+
 ## Parallel build
 
 To speed up the build, this package defines [`build_notebooks`](@ref).

src/html.jl

@@ -136,8 +136,15 @@ function _output2html(cell::Cell, ::MIME"text/plain", oopts)
     output_block(body; oopts.output_pre_class, var)
 end
 
+function _patch_inline_math(body::String)::String
+    body = replace(body, raw"""<span class="tex">$""" => raw"""<span class="tex">\(""")
+    body = replace(body, raw"""$</span>""" => raw"""\)</span>""")
+    body
+end
+
 function _output2html(cell::Cell, ::MIME"text/html", oopts)
     body = string(cell.output.body)::String
+    body = _patch_inline_math(body)
 
     if contains(body, """<script type="text/javascript" id="plutouiterminal">""")
         return _patch_with_terminal(body)

test/html.jl

@@ -243,3 +243,14 @@ end
     ])
     html, _ = notebook2html_helper(nb; use_distributed=false)
 end
+
+@testset "patch inline math" begin
+    nb = Notebook([
+        Cell(raw"""
+        md"Some inline math with $x$."
+        """)
+    ])
+    html, _ = notebook2html_helper(nb; use_distributed=false)
+    # Verify that Pluto.jl's inline math as `<span class="tex">$x$</span>` is replaced.
+    @test contains(html, raw"""Some inline math with <span class="tex">\(x\)</span>.""")
+end