Liquid::SyntaxError with Plotly in Markdown files using Jekyll

Question

Trying to convert an .ipynb notebook to Markdown that contains Plotly charts for use in a Jekyll site (hosted on GitHub Pages). I'm running into this error:

Liquid Exception: Liquid syntax error (line 134): Variable '{{ x.observe(notebookContainer, {childList: true}' was not properly terminated with regexp: /\}\}/ bundler: failed to load command: jekyll

Using this simple notebook to replicate this issue, link here. Markdown-converted file is here.

I tried downloading the notebook from Jupyter in converted formats (.md and .html) but am getting the same error. Also unable to open the Markdown file in Xcode as the program freezes on start when the file is in my project directory.

Any help with this issue is greatly appreciated.

Edit: Workaround mentioned here is to remove init_notebook_mode() and pio.renderers.default = 'jupyterlab'. Also avoid rendering Plotly directly in notebook by using pio.write_html() instead. Export to .md, add YAML front matter, then call {% include figure_name.html %}.

Answer 1

It looks like the JavaScript file you posted has a number of syntax inconsistencies. The one mentioned is clashing with Liquid templating's output tag {{ ... }}.

Here's the issue:

if (notebookContainer) {{
  x.observe(notebookContainer, {childList: true});
}}

Should not have the double braces:

if (notebookContainer) {
  x.observe(notebookContainer, {childList: true});
}

Answer 2

I don't think that the double braces are wrong in Javascript. In JavaScript, a block is denoted by curly braces. If this makes sense for the generated code is unclear to me, but for sure not a JS syntax issue.

The errors you see while generating the Jekyll web come from Liquid, the template engine used by Jekyll. Your post, like all documents, starts with a frontmatter. The frontmatter cause Jekyll to run the Liquid engine on your content. To prevent misinterpretations, e.g., double curly braces, you should prevent such parts of code processed by Liquid. To stop the Liquid processing, enclose those code sections (for mardown documents) in a raw section like so:

[//]: # {% raw %}
  e.g. JS code
[//]: # {% endraw %}

The problematic part is the JS code at the end of your post:

[//]: # {% raw %}
        <script type="text/javascript">
        window.PlotlyConfig = {MathJaxConfig: 'local'};
        if (window.MathJax) {MathJax.Hub.Config({SVG: {font: "STIX-Web"}});}
        if (typeof require !== 'undefined') {
        require.undef("plotly");

...

// Listen for the clearing of the current output cell
var outputEl = gd.closest('.output');
if (outputEl) {
    x.observe(outputEl, {childList: true});
}

                        })                };                });            </script>        </div>
[//]: # {% endraw %}

I'd modified your MD document that way and no more complains by Jekyll or Liquid!