Merge pull request #4479 from plotly/fix-page

LiamConnors · web-flow · commit 40014772c35d · 2024-01-09T14:40:49.000-05:00
Fix rendering issues on page
diff --git a/doc/python/interactive-html-export.md b/doc/python/interactive-html-export.md
@@ -6,9 +6,9 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.14.1
+      jupytext_version: 1.14.6
   kernelspec:
-    display_name: Python 3
+    display_name: Python 3 (ipykernel)
     language: python
     name: python3
   language_info:
@@ -20,7 +20,7 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.8.8
+    version: 3.10.11
   plotly:
     description: Plotly allows you to save interactive HTML versions of your figures
       to your local disk.
@@ -57,22 +57,25 @@ By default, the resulting HTML file is a fully self-contained HTML file which ca
 
 ### Inserting Plotly Output into HTML using a Jinja2 Template
 
-You can insert Plotly output and text related to your data into HTML templates using Jinja2. Use `.to_html` to send the HTML to a Python string variable rather than using `write_html` to send the HTML to a disk file.  Use the `full_html=False` option to output just the code necessary to add a figure to a template. We don't want to output a full HTML page, as the template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags.  First create an HTML template file containing a Jinja `{{ variable }}`.  In this example, we customize the HTML in the template file by replacing the Jinja variable `{{ fig }}` with our graphic `fig`. 
+You can insert Plotly output and text related to your data into HTML templates using Jinja2. Use `.to_html` to send the HTML to a Python string variable rather than using `write_html` to send the HTML to a disk file.  Use the `full_html=False` option to output just the code necessary to add a figure to a template. We don't want to output a full HTML page, as the template will define the rest of the page's structure — for example, the page's `HTML` and `BODY` tags.  First create an HTML template file containing a Jinja `{{ variable }}`.  In this example, we customize the HTML in the template file by replacing the Jinja variable `{{ fig }}` with our graphic `fig`.
+
+<!-- #region -->
 
 ```
-<!DOCTYPE html>
-<html>
-<body>
-<h1>Here's a Plotly graph!</h1>
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+&lt;h1&gt;Here's a Plotly graph!&lt;/h1&gt;
 {{ fig }}
-<p>And here's some text after the graph.</p>
-</body>
-</html>
+&lt;p&gt;And here's some text after the graph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
 ```
 
+
 Then use the following Python to replace `{{ fig }}` in the template with HTML that will display the Plotly figure "fig":
 
-```
+```python
 import plotly.express as px
 from jinja2 import Template
 
@@ -90,7 +93,7 @@ with open(output_html_path, "w", encoding="utf-8") as output_file:
         j2_template = Template(template_file.read())
         output_file.write(j2_template.render(plotly_jinja_data))
 ```
-
+<!-- #endregion -->
 
 ### HTML export in Dash
 
