CodeSample Styling

[Yuskhosmith]

I have an issue with the code sample part of things, the HTML saved from the editor is different from the HTML that's actually there when I inspect the page. For example when I write:

console.log('Hello, World')

The code I see when I inspect is this

<pre class="language-javascript" contenteditable="false">
    console<span class="token punctuation">.</span>
    <span class="token function">log</span>
    <span class="token punctuation">(</span>
    <span class="token string">'Hello, World'</span>
    <span class="token punctuation">)</span>
</pre>

But This is what is saved

<pre class="language-javascript">
    <code>console.log('Hello, World')</code>
</pre>

[Yuskhosmith]

I have been able to fix it. TinyMCE uses a prismjs as its default code highlighter. The JS is there to change how the pre-tag is rendered, but it's not saved as part of the source code. To make it render the same way it displays in the editor, we'll add the prism CSS and JS in the particular template we're using it in, and also load static. You can download the prism CSS and JS here.

For context:

{% load static %}

<link rel="stylesheet" href="{% static 'appname/css/prism.css' %}">
<script src="{% static 'appname/js/prism.js' %}"></script>
<div>{{module.module_content|safe}}</div>