---
eleventyNavigation:
  key: PreformattedText
  title: Preformatted Text
  parent: Markdown
  order: 50
---

In technical writing, code blocks, commands to be typed verbatim, or program
output are commonly represented by monospaced or fixed-width fonts. These
blocks are considered _preformatted_, because internal whitespace is to be
preserved.

There are three ways to use preformatted text within your Markdown documents:

- [Indenting](#indented-blocks) each line of a block of text by 4 or more spaces, or a tab character.
- Beginning and ending a block of text with a row of 3 or more backtick (\`) or
  tilde (~) characters, referred to as a ["fenced" code block](#fenced-code-blocks).
- Wrapping HTML `<pre></pre>` tags around a block of text.

Fenced code blocks can optionally
[specify a rendering hint](<#rendering-hints-(syntax-highlighting)>)
to apply syntax highlighting to the block.

<a id="using-indentation"></a> <!-- old section name, do not remove -->

## Indented blocks

You can preformat a block of text or code by indenting the code with **4 or more spaces, or a tab character**.

Example:

```
    This block of text
    will be preformatted
         and internal whitespace will be preserved.
```

Result:

```
This block of text
will be preformatted
     and internal whitespace will be preserved.
```

Using indentation, it's not possible to add a rendering hint, so the block will not be syntax-highlighted.

Indentation-based preformatting sometimes causes false positives where text is
unintentionally preformatted; for this reason, it is disabled in some
Markdown renderers, including in Codeberg Documentation.

<a id="using-backticks"></a> <!-- old section name, no not remove -->

## Fenced code blocks

As an alternative, you can create blocks of preformatted text by starting and ending the block with a row of 3 or more backtick (\`) or tilde (~) characters. There should be an equal number of these characters at both start and end.

Here, we use 3 backtick characters (\`\`\`) on their own line, then our text, then another line containing another 3 backticks.

````
```
this
is
displayed
as
preformatted
```
````

The result:

```
this
is
displayed
as
preformatted
```

<a id="rendering-hints"></a> <!-- old section name, do not remove -->

### Rendering hints (syntax highlighting)

Sometime renderers use hints to syntax highlight the code in a preformatted section.

To provide a hint, simply add the language name at the end of the introductory backtick(s). For example, using `shell` as the hint will tell the renderer that the given code should be highlighted as a shell script:

````
```shell
#!/bin/bash

echo "Hello world"
```
````

The result:

```shell
#!/bin/bash

echo "Hello world"
```

If the hint is omitted, the section will be rendered without syntax highlighting:

````
```
#!/bin/bash

echo "Hello world"
```
````

The result:

```
#!/bin/bash

echo "Hello world"
```

## See also

- [Introduction to Markdown § Monospaced font (code)](</markdown/introduction-to-markdown#monospaced-font-(code)>).
