plotly-mathjax-mwe.jl

### A Pluto.jl notebook ###
# v0.16.1

using Markdown
using InteractiveUtils

# ╔═╡ 75832ec3-b02c-4822-a516-6b08ff040d0a
md"""
# Plotly + mathjax MWE
"""

# ╔═╡ 5cf7ea10-1e31-11ec-08d9-2ddeac96037a
html"""
<script type="text/javascript" src="https://cdn.plot.ly/plotly-1.58.4.min.js"></script>


<script>
// remember to load MathJax.js?config=TeX-MML-AM_CHTML
var trace1 = {
  x: [1, 2, 3, 4],
  y: [1, 4, 9, 16],
  name: 'f(x)',
  type: 'scatter'
};
var data = [trace1];

// replacing the LaTeX math expression by a simple string will run
// without error:
var layout = {
  xaxis: {title: 'x'},
  yaxis: {title: '$x^2$'}
};
Plotly.newPlot('myDiv', data, layout);
</script>

<div id="myDiv" style= "width: $(p.w)px; height: $(p.h)px; ; display: inline-block; "></div>

"""

# ╔═╡ 7bf93374-293a-4279-b95b-d58304298ce0
md"""
On Pluto 0.16.1 this gives the following error output:
"""

# ╔═╡ d946fff5-a58e-4b26-a449-3578f28a3905
md"""
```
SetupMathJax.js:17 Uncaught (in promise) TypeError: window.MathJax.Callback is not a function
    at Object.Queue (SetupMathJax.js:17)
    at plotly-1.58.4.min.js:61
    at plotly-1.58.4.min.js:61
    at new Promise (<anonymous>)
    at Array.r.convertToTspans (plotly-1.58.4.min.js:61)
    at Array.Y.call (plotly-1.58.4.min.js:20)
    at F (plotly-1.58.4.min.js:61)
    at Object.c.syncOrAsync (plotly-1.58.4.min.js:61)
    at Array.R (plotly-1.58.4.min.js:61)
    at Array.Y.call (plotly-1.58.4.min.js:20)
Queue @ SetupMathJax.js:17
(anonymous) @ plotly-1.58.4.min.js:61
(anonymous) @ plotly-1.58.4.min.js:61
r.convertToTspans @ plotly-1.58.4.min.js:61
Y.call @ plotly-1.58.4.min.js:20
F @ plotly-1.58.4.min.js:61
c.syncOrAsync @ plotly-1.58.4.min.js:61
R @ plotly-1.58.4.min.js:61
Y.call @ plotly-1.58.4.min.js:20
draw @ plotly-1.58.4.min.js:61
(anonymous) @ plotly-1.58.4.min.js:61
(anonymous) @ plotly-1.58.4.min.js:61
c.syncOrAsync @ plotly-1.58.4.min.js:61
B.drawOne @ plotly-1.58.4.min.js:61
(anonymous) @ plotly-1.58.4.min.js:61
c.syncOrAsync @ plotly-1.58.4.min.js:61
B.draw @ plotly-1.58.4.min.js:61
(anonymous) @ plotly-1.58.4.min.js:61
c.syncOrAsync @ plotly-1.58.4.min.js:61
r.plot @ plotly-1.58.4.min.js:61
r.newPlot @ plotly-1.58.4.min.js:61
eval @ VM646:16
eval @ VM646:17
execute_dynamic_function @ CellOutput.js:204
execute_scripttags @ CellOutput.js:264
(anonymous) @ CellOutput.js:333
run @ CellOutput.js:298
(anonymous) @ CellOutput.js:331
p @ Preact.js:502
(anonymous) @ Preact.js:478
(anonymous) @ Preact.js:477
ge.__c @ Preact.js:475
B1 @ Preact.js:218
(anonymous) @ Preact.js:110
T1 @ Preact.js:105
Promise.then (async)
r.plot @ plotly-1.58.4.min.js:61
r.newPlot @ plotly-1.58.4.min.js:61
eval @ VM646:16
eval @ VM646:17
execute_dynamic_function @ CellOutput.js:204
execute_scripttags @ CellOutput.js:264
(anonymous) @ CellOutput.js:333
run @ CellOutput.js:298
(anonymous) @ CellOutput.js:331
p @ Preact.js:502
(anonymous) @ Preact.js:478
(anonymous) @ Preact.js:477
ge.__c @ Preact.js:475
B1 @ Preact.js:218
(anonymous) @ Preact.js:110
T1 @ Preact.js:105
Promise.then (async)
M @ Preact.js:100
S1.setState @ Preact.js:339
(anonymous) @ Editor.js:550
apply_notebook_patches @ Editor.js:548
on_update @ Editor.js:631
on_message @ PlutoConnection.js:362
(anonymous) @ PlutoConnection.js:128
async function (async)
(anonymous) @ PlutoConnection.js:124
Promise.then (async)
socket.onmessage @ PlutoConnection.js:122
Show 5 more frames
```
"""

# ╔═╡ 00000000-0000-0000-0000-000000000001
PLUTO_PROJECT_TOML_CONTENTS = """
[deps]
"""

# ╔═╡ 00000000-0000-0000-0000-000000000002
PLUTO_MANIFEST_TOML_CONTENTS = """
# This file is machine-generated - editing it directly is not advised

julia_version = "1.7.0-rc1"
manifest_format = "2.0"

[deps]
"""

# ╔═╡ Cell order:
# ╟─75832ec3-b02c-4822-a516-6b08ff040d0a
# ╠═5cf7ea10-1e31-11ec-08d9-2ddeac96037a
# ╟─7bf93374-293a-4279-b95b-d58304298ce0
# ╟─d946fff5-a58e-4b26-a449-3578f28a3905
# ╟─00000000-0000-0000-0000-000000000001
# ╟─00000000-0000-0000-0000-000000000002