Change HasShortcode example

jmooring · Jan 26, 2024 · d2620c5 · d2620c5
1 parent d47c3a6
commit d2620c5
Showing 1 changed file with 25 additions and 25 deletions.
diff --git a/content/en/methods/page/HasShortcode.md b/content/en/methods/page/HasShortcode.md
@@ -9,41 +9,41 @@ action:
   signatures: [PAGE.HasShortcode NAME]
 ---
 
-By example, let's use [MathJax] to render a LaTeX mathematical expression:
-
-[MathJax]: https://www.mathjax.org/
-
-{{< code file=contents/physics/lesson-1.md lang=markdown >}}
-Albert Einstein’s theory of special relativity expresses
-the fact that mass and energy are the same physical entity
-and can be changed into each other.
-
-{{</* math */>}}
-$$
-E=mc^2
-$$
-{{</* /math */>}}
-
-In the equation, the increased relativistic mass (m) of a
-body times the speed of light squared (c2) is equal to
-the kinetic energy (E) of that body.
+By example, let's use [Plotly] to render a chart:
+
+[Plotly]: https://plotly.com/javascript/
+
+{{< code file=contents/example.md lang=markdown >}}
+{{</* plotly */>}}
+{
+  "data": [
+    {
+      "x": ["giraffes", "orangutans", "monkeys"],
+      "y": [20, 14, 23],
+      "type": "bar"
+    }
+  ],
+}
+{{</* /plotly */>}}
 {{< /code >}}
 
 The shortcode is simple:
 
-{{< code file=layouts/shortcodes/math.html  >}}
-{{ trim .Inner "\r\n" }}
+{{< code file=layouts/shortcodes/plotly.html  >}}
+{{ $id := printf "plotly-%02d" .Ordinal }}
+<div id="{{ $id }}"></div>
+<script>
+  Plotly.newPlot(document.getElementById({{ $id }}), {{ .Inner | safeJS }});
+</script>
 {{< /code >}}
 
-Now we can selectively load the required CSS and JavaScript on pages that call the "math" shortcode:
-
+Now we can selectively load the required JavaScript on pages that call the "plotly" shortcode:
 
 {{< code file=layouts/baseof.html  >}}
 <head>
   ...
-  {{ if .HasShortcode "math" }}
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  {{ if .HasShortcode "plotly" }}
+    <script src="https://cdn.plot.ly/plotly-2.28.0.min.js"></script>
   {{ end }}
   ...
 </head>