# \[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:** 11
**Page:** 1
### Author:  [@ThibautRuy](https://discourse.nodered.org/u/ThibautRuy)
#### Post date: [2 February 2022 08:37 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/1 "2022-02-02T08:37:51Z")
HI,
I am switching from dashboard to uibuilder and would like to use prism with uibuilder.
I successfully added the prism library using the library manager, my user node-red path is **~/.node-red** what should I use in my html instead of the prism sample code below? Maybe Julian can help @TotallyInformation ?
```auto
...
...
```
I use node-red v2.1.4 and uibuilder v4.1.4
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [2 February 2022 14:01 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/2 "2022-02-02T14:01:25Z")
Hi, and welcome to uibuilder 😀
All of the vendor front-end libraries are served from `../uibuilder/vendor//` So in your case, most likely `../uibuilder/vendor/prism/`.
The actual file references can sometimes take a bit of working out and you can either simply look into the installed package folder or you can look at a CDN to work out what the references are.
In the case of Prism, you can also find out what you need from its package.json file:
>
So you need `` and ``
You can look at the details page in uibuilder as well as it will give you some hints. In this case, it would have told you the correct path for the .js file but not the CSS.
Interestingly, I'd not spotted the `style` property in package.json before. Now that I know about it and can see that a number of big packages are supporting it, I will add to the backlog to include it in the details page for ease of reference. Nice 🧙
* * *
Couple of things to note for when v5 comes along (currently available via the GitHub vNext branch if you want to get ahead of the game).
- Package installations are on the move. This is one of the breaking changes in v5. Currently packages get put into the same folder as your Node-RED nodes (the userDir folder). This hasn't proven to be the best choice and from v5 they will go into the `uibRoot` folder (default `/uibuilder` but movable). This will mean moving or reinstalling I'm afraid.
- In v5, the installed packages list will include more information so that you will be able to see the most likely JavaScript filename you will want to reference. These are still only a guide however because a package may provide several entrypoints.
* * *
Perhaps I should also have explained why `../` rather than `http://` - this is because using a relative URL like this avoids messing around with specifying protocols and ports and such like. It, for the most part, makes your code a lot simpler and more standard.
---
### Author:  [@ThibautRuy](https://discourse.nodered.org/u/ThibautRuy)
#### Post date: [3 February 2022 18:49 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/3 "2022-02-03T18:49:09Z")
I still receive:
`GET http://xx.xxx.xxx.xxx/:213 GET http://xx.xxx.xxx.xxx:1880/uibuilder/vendor/prism/prism.js net::ERR_ABORTED 404 (Not Found)`
using in head
```auto
```
and in body
``
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [4 February 2022 09:10 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/4 "2022-02-04T09:10:40Z")
OK, that's because on [npmjs.org](http://npmjs.org) there are two packages called prism. `prism` and `prismjs` - it is `prismjs` that needs to be installed. If you look into the package.json file for that, you get this:
```auto
```
and
```auto
```
---
### Author:  [@ThibautRuy](https://discourse.nodered.org/u/ThibautRuy)
#### Post date: [6 February 2022 10:05 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/5 "2022-02-06T10:05:16Z")
It works now, I see my index.js using Prism.js, but in my html, it does not want to render the Prismjs tokenized xml... like if the dynamically built variable hLastRcvd\_payload was well received in the html, but not rendered by Prism... However when I paste directly the tokenized code, as static data in the html, it does render it as highlighted.
```auto
hLastRcvd_payload: function() {
var msgRecvd = this.msgRecvd.payload
...
return Prism.highlight(msgRecvd, Prism.languages.xml);
```
and
```auto
{{hLastRcvd_payload}}
```
I try to force the rendering but I am not successful yet...
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [6 February 2022 12:48 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/6 "2022-02-06T12:48:02Z")
Can you share your index.html and index.js and an example msg?
---
### Author:  [@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")
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:
`this is a test`
returned by _Prism.highlight(this.code, Prism.languages.xml)_:
`<tag_xmlattr="a_attr_value">this is a test</tag_xml>`
1. **Rendering in the html page - index.html**
- including relevant css links
```auto
```
- Javascript
``
- 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.
`
`
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 !
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [7 February 2022 13:32 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/8 "2022-02-07T13:32:55Z")
Great, glad you got it working and thanks for sharing what you did. Should be helpful to others as well.
> [@ThibautRuy](#):
>
> v-html
Yes, that is an early mistake for many people. If you send HTML to a Vue component, you need to tell Vue that it is HTML - that's a security feature of Vue and most other frameworks.
> [@ThibautRuy](#):
>
> note: I removed all spaces and carriage returns on this line as it had caused involuntary spaces at the beginning of the highlighted code.
Yes, `
` treats everything literally.
---
### Author:  [@ThibautRuy](https://discourse.nodered.org/u/ThibautRuy)
#### Post date: [7 February 2022 13:36 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/9 "2022-02-07T13:36:45Z")
> [@TotallyInformation](#):
>
> Yes, `
` treats everything literally.
Interesting point, does it mean that in a div, or a textarea, I would get it directly rendered?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [7 February 2022 13:44 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/10 "2022-02-07T13:44:01Z")
No 🙂 It means that HTML ignores extraneous whitespace in any element EXCEPT `
` (unless you override the whitespace parameter using CSS).
`
` is HTML not Vue. Vue still needs to be told that some content contains HTML. Otherwise it is hard to protect the page from inserting attacking HTML (such as a rogue iFrame or script tag).
Remember that a standard web page consists of: HTML, CSS and JavaScript (and maybe a few other things like SVG). VueJS adds some additional smarts via JavaScript to make dynamic interfaces easier to code.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [21 February 2022 13:44 UTC](https://discourse.nodered.org/t/uibuilder-how-to-add-and-use-prism-with-uibuilder/57626/11 "2022-02-21T13:44:52Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.