# HTML in site settings field for a plugin

**URL:** https://meta.discourse.org/t/html-in-site-settings-field-for-a-plugin/50160
**Category:** Development
**Created:** [2016年九月14日 20:31 UTC](https://meta.discourse.org/t/html-in-site-settings-field-for-a-plugin/50160 "2016-09-14T20:31:49Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2016年九月14日 20:31 UTC](https://meta.discourse.org/t/html-in-site-settings-field-for-a-plugin/50160/1 "2016-09-14T20:31:49Z")

</div>

I’m trying to figure out how to have some custom HTML added to a plugin setting and then display that HTML safely in a widget.

My widget code is the following:

```
import { createWidget } from 'discourse/widgets/widget';
import { h } from 'virtual-dom';

createWidget('sidebar-custom-content', {
  tagName: 'div.sidebar-custom-content',

  html(attrs) {
    return h('div', Discourse.SiteSettings.sidebar_custom_content);
  },
});

```

and the plugin settings.yml has this:

```
  sidebar_custom_content:
    type: text
    default: ''
    client: true

```

As it is, if I enter HTML in the setting field, it gets output as regular text.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2016年九月15日 03:59 UTC](https://meta.discourse.org/t/html-in-site-settings-field-for-a-plugin/50160/2 "2016-09-15T03:59:03Z")

</div>

Found the solution to my own question. Replace this line:  
`return h('div', Discourse.SiteSettings.sidebar_custom_content);`  
with  
`return h('div', {innerHTML: Discourse.SiteSettings.sidebar_custom_content});`

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年九月15日 14:59 UTC](https://meta.discourse.org/t/html-in-site-settings-field-for-a-plugin/50160/3 "2016-09-15T14:59:23Z")

</div>

I’m surprised this works! From what I saw in the virtual dom library that might break things. The way we do it is like this:

```javascript
html(attrs) {
  return new RawHtml({ html: `<div>${this.siteSettings.sidebar_custom_content}</div>` });
}

```

Of course you have to `import RawHtml from 'discourse/widgets/raw-html';` too.