如何将html代码插入prism代码标记？

Question

I'm using Prism to display my components in a project and it's working well when I write the code itself inside the <pre><code class="language-markup">...</code></pre> .

Here is my codepen .

<pre>
    <code class="language-markup">  

        &lt;!-- botão simples -->
        &lt;button class="btn left">Button&lt;/button>

        &lt;!-- botão com ícone na esquerda -->
        &lt;button class="btn left">&lt;i class="material-icons left">add&lt;/i>Button&lt;/button>

        &lt;!-- botão com ícone na direita -->
        &lt;button class="btn left">&lt;i class="material-icons right">add&lt;/i>Button&lt;/button>

    </code>
</pre>

OUTPUT

However, now I want to grab some innerHTML and put it into the <code></code> tag, but when I do this it doesn't work.

MY SCRIPT

// Get all divs with the ".topic" class and returns a list of it
// @return list | array()
function getTopicList() {

    // Create the list
    let list = [];

    // Populate the list
    $('.topic').map(function() {
        list.push($(this));
    });

    // Returns the list
    return list;

}

// Set the example code inside a "code" tag
// @param topic       | jquery object
// @param exampleCode | string
function setExampleCode(topic, exampleCode) {

    // Replace "<" with "&lt;"
    exampleCode = exampleCode.replace(/</g, '&lt;');

    // Set the example's code inside the "code" tag
    $(topic).find('code').text(exampleCode);

}

// Get the HTML code inside the div as a string
// @param topic | jquery object
function generateExampleCode(topic) {

    // Get the HTML code as string
    let exampleCode = $(topic).find('.example').html();

    // Calls a function to append the code as a string into the div
    setExampleCode(topic, exampleCode);

}

// When the page is fully loaded
$(document).ready(function() {

    // Get a list of all the divs that have the ".topic" class
    let topicList = getTopicList();

    // Get the HTML code of all the ".topic" divs
    topicList.map(generateExampleCode);

});

OUTPUT 2

Even when I try to append a <pre><code class="language-markup">...code...</code></pre> into the div it doesn't work. How can I do this? Is there a simpler way to do this?

Answer 1

I've found a solution:

When you insert code via js/angular/vue/etc you have to rerun Prism.

Just use the Prism.highlightAll() function after you insert the code;