Javascript Bokeh Plot not rendering in browser

Question

I am creating a Bokeh Plot, and passing the html code script, div = components(plot)

return render_template('results.html',the_div=div,the_script=script)

The script and div have been passed to the browser, but instead of seeing the plot it displays the html code.

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block html_attribs %} lang="en" charset="utf-8"{% endblock %}

{% block title %}  Results {% endblock %}
{% block metas %}
</mysite/static/favicon-96x96.png">
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.0.2.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.0.2.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.0.2.min.js"
        crossorigin="anonymous"></script>


{% endblock %}

{% block content %}

<div class="container">
        {{ the_script }}
        {{ the_div }}
</div>

Can someone point out where I'm going wrong? -I've check that the bokeh version I'm using is 2.0.2 I am not familiar with javascript so I am assuming it could be a simple fix

The view from the browser console:

Answer 1

By default, all template parameters are escaped to prevent them from altering the DOM structure. Since you do need to alter the DOM structure, you should just add |save to each variable:

{{ the_script|safe }}
{{ the_div|safe }}

More details: https://jinja.palletsprojects.com/en/2.11.x/templates/#working-with-automatic-escaping

Answer 2

Your console screenshot shows the problem. You are trying to load Bokeh JSON generated with Python Bokeh version 1.3.4 with BokehJS version 2.0.2 from CDN. This is not supported and will not work (the versions must match).