Enable MathJax in dcc.Markdown (#652)

equinor · Nov 23, 2022 · c78ae45 · c78ae45
1 parent a47d14a
commit c78ae45
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - [#648](https://github.com/equinor/webviz-config/pull/648) - Allow `blob:` in `script-src` CSP in order to enable web worker usage in Dash components.
+- [#652](https://github.com/equinor/webviz-config/pull/652) - Enabled support for LaTeX math/equations in markdown.
 
 ### Added
 - [#644](https://github.com/equinor/webviz-config/pull/644) - Added option to download tables in `DataTable` and `PivotTable`.

diff --git a/examples/basic_example.yaml b/examples/basic_example.yaml
@@ -16,6 +16,7 @@ layout:
         title: My banner image
     - Webviz created from configuration file.
     - Some other text, potentially with strange letters like Åre, Smørbukk Sør.
+    - And even math like $e^{\pi i} + 1 = 0$. 
 
  - page: Markdown example
    content:

diff --git a/examples/example-markdown.md b/examples/example-markdown.md
@@ -7,6 +7,18 @@
 Hi from a Markdown text file containing Norwegian letters (æ ø å), some
 **bold** letters, _italic_ letters. _You can also **combine** them._
 
+You can also add (potential multi-line) equations as illustrated here with the Maxwell equations,
+$$
+\begin{aligned}
+\nabla \cdot \mathbf{E} &= \frac {\rho} {\varepsilon_0} \\\\
+\nabla \cdot \mathbf{B} &= 0 \\\\
+\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}} {\partial t} \\\\
+\nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}} {\partial t} \right)
+\end{aligned}
+$$
+You can also add inline math where you e.g. describe the different parameters that goes into
+the equations, like $\varepsilon_0$ being permittivity of free space.
+
 ---
 
 Horizontal line splitting two paragraphs.

diff --git a/webviz_config/generic_plugins/_markdown.py b/webviz_config/generic_plugins/_markdown.py
@@ -197,7 +197,10 @@ def add_webvizstore(self) -> List[tuple]:
     @property
     def layout(self) -> dcc.Markdown:
         return dcc.Markdown(
-            self.html, dangerously_allow_html=True, className="webviz-config-markdown"
+            self.html,
+            dangerously_allow_html=True,
+            mathjax=True,
+            className="webviz-config-markdown",
         )
 
 

diff --git a/webviz_config/templates/webviz_template.py.jinja2 b/webviz_config/templates/webviz_template.py.jinja2
@@ -128,7 +128,7 @@ else:
     page_settings["{{page.id}}"] = []
     {% for content_item in page.content -%}
     {% if content_item is string %}
-    page_plugins["{{page.id}}"].append(wcc.WebvizPluginWrapper(id=f"text-{count_text_plugins}", views=[], initiallyActiveViewId="", name="Text", children=[dcc.Markdown(r"""{{ content_item }}""")]))
+    page_plugins["{{page.id}}"].append(wcc.WebvizPluginWrapper(id=f"text-{count_text_plugins}", views=[], initiallyActiveViewId="", name="Text", children=[dcc.Markdown(r"""{{ content_item }}""", mathjax=True)]))
     count_text_plugins += 1
     {% else %}
     plugin = webviz_config.plugins.{{ content_item._call_signature[0] }}