Bolding, Underlining, Etc.

## Introduction

The following section will talk about how to use HTML Tags to make bold, underlined, or italic texts in Perchance.

## Examples

### Bolding, Underlining, Italic, Strikethrough

In the example below, we're making the word "compassion" bold:

```
Kindness and <b>compassion</b> are underrated.

```

That looks like this:

Kindness and **compassion** are underrated.

So, to make some text **bold**, just put `<b>` at the start, and `</b>` at the end of it.

And to make some text *italic*, put `<i>` at the start, and `</i>` at the end of it.

And to underline some text, put `<u>` at the start, and `</u>` at the end of it.

And to ~~strike through~~ some text, put `
` at the start, and `
` at the end of it.

By the way, these things (that start with `<something>` and end with `</something>`) are called HTML "tags". So you've just learned some of the basics of the HTML language. All the web pages on the internet are built using HTML. The other two languages used by web pages are CSS and JavaScript.

### Linebreak

If you want to add a new line (break some text into a second line), just add `<br>` wherever you want to **break** the text, like so:

```
Kindness and compassion<br>are underrated.

```

```
Kindness and compassion

are underrated.

```

You can add multiple `<br>` tags to break your text up into paragraphs, like so:

```
My first paragraph.<br><br>My second paragraph.

```

```
My first paragraph.

My second paragraph.

```

Not too difficult, right? There's lots more to learn about HTML over at the (completely free) Khan Academy HTML+CSS course. If you want to learn more about how to customize your generator, I highly recommend it! You can also see html docs at W3Schools if you already know html but need a refresher.

### Multiline Output

Tip: Let's say one your lists has a single item that is really long, like this:

```
listWithOneLongItem
  This is a really long line. This is the second sentence of the really long line. And this is the third sentence. And this is the fourth sentence. And this is the fifth sentence.

```

To make it easier to read and edit, you either click the "wrap" button in the top-right of the editor, or you can separate your single item into several items and then add `$output = [this.joinItems(" ")]` as the first item of this list, like this:

```
listWithOneLongItem
  $output = [this.joinItems(" ")]
  This is a really long line.
  This is the second sentence of the really long line.
  And this is the third sentence.
  And this is the fourth sentence.
  And this is the fifth sentence.

```

Adding that special `$output = ...` item to the list causes `[listWithOneLongItem]` to output all the items joined together instead of a random item.

### Links

You can create a link to another generator, or to a completely different website like this:

```
Hi there, <a href="https://example.com">click here</a> to visit my blog!

```

If you want to make it so clicking the link opens a new tab, rather than going directly to the new page in the current tab, you just need to add the `target="_blank"` attribute to your `<a>` tag, like this:

```
Hi there, <a href="https://example.com" target="_blank">click here</a> to visit my blog!

```

### Whitespace

HTML is a bit weird in some aspects: If you add multiple spaces between words, it ignores the extra spaces by default. So if you write this:

```
Kindness and compassion         are underrated.

```

then by default it'll come out like this:

> Kindness and compassion are underrated.
>
>

So what do you do if you want multiple spaces? Well, you need to use this weird bunch of characters: `&nbsp;` (which stands for "non-breaking space"), like this:

```
Kindness and compassion &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; are underrated.

```

> Kindness and compassion          are underrated.
>
>

I know, it's weird. I'm sorry about that! One alternative is to wrap your output (in the HTML panel - the bottom-right editor) in a `<p>` tag with a special style attribute like this:

```
<p style="white-space:pre-wrap;">[output]</p>

```

And now you can use multiple spaces like normal - no need for the `&nbsp;` stuff.

If your `[output]` is currently wrapped in a `<p>` tag that has an existing `style` "attribute", like this, for example:

```
<p style="margin:1em auto; padding:0 1em; max-width:700px;">[output]</p>

```

Then you can just add the `white-space:pre-wrap;` at the end of the style attribute like this:

```
<p style="margin:1em auto; padding:0 1em; max-width:700px; white-space:pre-wrap;">[output]</p>

```