[uibuilder] how to add and use prism with uibuilder

[ThibautRuy]

I managed to achieve my goal ! Sorry I cannot share the whole file.

Here is the solution, following this Stackoverflow post: Prism not working inside Vue component

1. Initializing the code variable - index.js
   I created a dedicated data "code" and initialized it as per the post explanation but using uibuilder sample syntax:

data() { return {
        startMsg    : 'Vue has started, waiting for messages',
        feVersion   : '',
        ...
        code        : 'void main() { } class MyClass',

    }}, // --- End of data --- //

2. Creating a dedicated computed property as a function - index.js

highlightedCode: function() {
             var msgRecvd = this.msgRecvd.payload
             this.code=msgRecvd;
             return Prism.highlight(this.code, Prism.languages.xml);
}

Sorry, I removed part of my logic here that is not relevant to this post, but as you can see, I receive a message from the flow, which is a response to a request, what I am highlighting is the response here...

Prism.highlight transforms the the code into an html code ready to be rendered to highlight the code.
Sample:

incoming:

<tag_xml attr="a_attr_value">this is a test</tag_xml>

returned by Prism.highlight(this.code, Prism.languages.xml):

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tag_xml</span> <span class="token attr-name">attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a_attr_value<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>this is a test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tag_xml</span><span class="token punctuation">></span></span>

3. Rendering in the html page - index.html

• including relevant css links

<link href="../uibuilder/vendor/prismjs/themes/prism.css" rel="stylesheet" />
<link href="../uibuilder/vendor/vue-code-highlight/themes/window.css" rel="stylesheet">

• Javascript
  <script src="../uibuilder/vendor/prismjs/prism.js"></script>

• Plain html - this is one of the most important step, adding v-html to force interpreting the new html code coming from Prism.highlight in the Javascript code.

<pre style="overflow-x: auto;white-space: pre-wrap;word-wrap: break-word;" class="language-xml"><code style="text-align: left" wrap="hard" v-html="highlightedCode"></code></pre>

note: I removed all spaces and carriage returns on this line as it had caused involuntary spaces at the beginning of the highlighted code.

It works like a charm! Each time I receive the message, it is transformed into the relevant html code, then rendered by v-html in the page

Thanks !