# \[uibuilder\] how to add and use prism with uibuilder

**URL:** https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626
**Category:** Dashboard
**Tags:** uibuilder
**Created:** [2 February 2022 08:37 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626 "2022-02-02T08:37:51Z")
**Posts on this page:** 1
**Showing post:** 7

<div class="post-metadata">

### Author: ![ThibautRuy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thibautruy/32/28480_2.png) [@ThibautRuy](https://discourse.nodered.org/u/ThibautRuy)
#### Post date: [7 February 2022 08:56 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/7 "2022-02-07T08:56:39Z")

</div>

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](https://stackoverflow.com/questions/44563642/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:

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

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

```

1. **Creating a dedicated computed property as a function - index.js**

```auto
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>`

1. **Rendering in the html page - index.html**

- including relevant css links

```auto
<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 😀

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18cbf5c3c6d4767ce087a98623e06cd4017b0963.jpeg)

Thanks !

---

_[View the full topic](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626)._