# How to make part of text in a paragraph bold/italic/etc using helper.h functions?

**URL:** https://meta.discourse.org/t/how-to-make-part-of-text-in-a-paragraph-bold-italic-etc-using-helper-h-functions/160106
**Category:** UX
**Created:** [7 augustus 2020 om 07:53 UTC](https://meta.discourse.org/t/how-to-make-part-of-text-in-a-paragraph-bold-italic-etc-using-helper-h-functions/160106 "2020-08-07T07:53:28Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![loginerror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loginerror/32/156605_2.png) [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [7 augustus 2020 om 07:53 UTC](https://meta.discourse.org/t/how-to-make-part-of-text-in-a-paragraph-bold-italic-etc-using-helper-h-functions/160106/1 "2020-08-07T07:53:28Z")

</div>

Maybe a simple question, but it stopped me for a bit 😅

How to achieve this using Discourse helper.h function?

```plaintext
<div>
<p>This text <i>is italic</i> </p>
</div>

```

The closest I got is this:

```plaintext
    html() {
      return [ h('div'),
                h('p', "This text" + h('i', "is italic"))
             ]
    }

```

Which returns this:  
 ![image](https://global.discourse-cdn.com/meta/original/3X/a/9/a951064500c5569980f256470daccd72bfb00116.png)

Otherwise, a few other variants I tried either return `This text` or `is italic`, but not both 🤔

For example, this:

```plaintext
    html() {
      return [ h('div'),
                h('p', "This text", [h('i', "is italic")])
             ]
    }

```

returns just the `is italic`  
 ![image](https://global.discourse-cdn.com/meta/original/3X/2/e/2e906346b8e9067240bfea1f0abdd243aaf2b588.png)

Almost there?  
This:

```plaintext
    html() {
      return [ h('div', ),
                h('p', [h('i', "is italic"), "This text"])
             ]
    }

```

Gives me this 😅

![image](https://global.discourse-cdn.com/meta/original/3X/5/f/5ff9f37ad5f970c8c4022469776d6c39e94f29fc.png)

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [7 augustus 2020 om 08:51 UTC](https://meta.discourse.org/t/how-to-make-part-of-text-in-a-paragraph-bold-italic-etc-using-helper-h-functions/160106/2 "2020-08-07T08:51:51Z")

</div>

The [parameters to the `h` function](https://github.com/Matt-Esch/virtual-dom/blob/master/virtual-hyperscript/index.js#L19-L26) are `tagName, properties, children`. You can skip `properties` if you want, and just use `tagName, children`. Children can either be a single node, or an array of multiple nodes.

So I think you want something like

```js
h('div', // <div>
  h('p', [ // <p>
    'This text ',
    h('i', 'is italic') // <i></i>
  ]) // </p>
); // </div>
```

---

<div class="post-metadata">

### Author: ![loginerror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loginerror/32/156605_2.png) [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [7 augustus 2020 om 11:13 UTC](https://meta.discourse.org/t/how-to-make-part-of-text-in-a-paragraph-bold-italic-etc-using-helper-h-functions/160106/3 "2020-08-07T11:13:31Z")

</div>

Thank you, I didn’t realize a single node can also be a simple text. This is now quite powerful.

On another note, did to ever consider introducing a simple converter from HTML → h function? This would speed up development a lot at times 🙂

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7 augustus 2020 om 13:57 UTC](https://meta.discourse.org/t/how-to-make-part-of-text-in-a-paragraph-bold-italic-etc-using-helper-h-functions/160106/4 "2020-08-07T13:57:17Z")

</div>

It is possible to use a template like this in some cases

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/embedded-post.js#L11](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/embedded-post.js#L11)