I’m building a site based on Hugo that should display interactive plots that were created with bokeh . The plots are saved into an HTML file, but I can’t find a way to embed these inside a markdown page. Any ideas? Thanks!

You can just copy the HTML in your markdown file. Give it a try. Also you can put an HTML file in content and it will be rendered as is. A third way is to store it in static and reference the URL in your markdown file. Damn, Hugo is cool…

Thanks for the answer! These are nice options, but is there any way to do it via a combination of a short code and Page Resources?

Don’t see a reason why this should not work. How I always try to find out: Generate a test project, create a page bundle and try to access the respective file like described in the docs.

Well for some reason, HTML files that are in a resources folder get lost along the way. A file like content/posts/post_1/resources/myfile.html won’t be accessible via http://mysite.com/posts/post_1/resources/myfile.html. The same file renamed to content/posts/post_1/resources/myfile.txt will, howe…

Ah, interesting. Have to try that by myself and try to find a solution.

Are you using a branch or leaf bundle?

I solved it by exporting the bokeh plots to a JSON object and loading these using BokehJS . I put the JSON file into a resource folder and created this shortcode (bokeh.html): {{ $item := $.Page.Resources.GetMatch (.Get 0)}} <div id="{{ .Get 0 }}"> <script charset="utf-8" type="text/javascript"> …

This is an old thread, but any help would be useful! Where did you include the BokehJS CDN? I have my plot in a JSON object which is stored in static/plots/umap-plot.json. Unfortunately your shortcode throws an error for me and I think its because BokehJS doesn’t actually exist yet!

You just need to include something like this in the head of the html page: <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.0.2.min.css" type="text/css" /> <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.0.2.min.js"></script> <script type="t…

Embed HTML file in page

support

Topic		Replies	Views
Struggling with leaf bundle support	16	1891	December 27, 2019
Some HTML files get lost, how to force them? support	3	154	December 11, 2024
Embed Plotly Figure (HTML) in Markdown Post support diagram , chart	5	4894	April 26, 2020
How to link to an HTML file within a Markdown page bundle support	10	199	July 5, 2025
Embed HTML to blog content support shortcodes	5	234	March 13, 2025

Embed HTML file in page

Related topics