{% spaceless %}
    {% with prism_version="1.6.0" %}
        {% for key, val in self.items %}
            {% if key == "language" %}
                {% comment %}
                We are going to load Prism's JS, CSS, and the language dialects we need.
                We only load Prism's core CSS and JS on the first loop through in case there
                are multiple code blocks in multiple languages on the page.
                {% endcomment %}
                <script>
                    try {
                        prism_loaded;
                    } catch(err) {
                        document.write('<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/{{ prism_version }}/themes/prism.min.css" rel="stylesheet" />');
                        $.getScript('https://cdnjs.cloudflare.com/ajax/libs/prism/{{ prism_version }}/prism.min.js');

                        document.write('<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/{{ prism_version }}/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />');
                        $.getScript('https://cdnjs.cloudflare.com/ajax/libs/prism/{{ prism_version }}/plugins/line-numbers/prism-line-numbers.min.js');

                        prism_loaded = true;
                    }
                    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/prism/{{ prism_version }}/components/prism-{{ val }}.min.js');
                    language_class_name = 'language-{{ val }}';
                </script>
            {% endif %}
            {% if key == "code" %}
                <pre class="line-numbers">
                    <code id="target-element-current">{{ val }}</code>
                </pre>
                <script>
                    var block_num = (typeof block_num === 'undefined') ? 0 : block_num;
                    block_num++;
                    document.getElementById('target-element-current').className = language_class_name;
                    document.getElementById('target-element-current').id = 'target-element-' + block_num;
                </script>
            {% endif %}
        {% endfor %}
    {% endwith %}
{% endspaceless %}

{% load static %}
{% spaceless %}
    {# This is ugly, as it'll inject this code for each block, but browsers are smart enough to not load each time. #}
    <script src="{% static 'wagtailcodeblock/js/prism.min.js' %}" type='text/javascript'></script>
    <link href="{% static 'wagtailcodeblock/css/prism.min.css' %}" rel="stylesheet">
    {% for key, val in self.items %}
        {% if key == "language" %}
            <script>
                language_class_name = 'language-{{ val }}';
            </script>
        {% endif %}
        {% if key == "code" %}
            <pre class="line-numbers">
                <code id="target-element-current">{{ val }}</code>
            </pre>
            <script>
                var block_num = (typeof block_num === 'undefined') ? 0 : block_num;
                block_num++;
                document.getElementById('target-element-current').className = language_class_name;
                document.getElementById('target-element-current').id = 'target-element-' + block_num;
            </script>
        {% endif %}
    {% endfor %}
{% endspaceless %}

Bring JS and CSS in locally.
Bring JS and CSS in locally.
