Markdown

Codeblocks

The PostHog website has a custom codeblock component that comes with a number of useful features built-in:

• Syntax highlighting
• Multiple snippets in a single codeblock
• Specifying which file a snippet is from

Basic codeblock

Codeblocks in PostHog are created by enclosing your snippet using three backticks (```) or three tildes (~~~), as shown below:

```
{
    "name": "Max, Hedgehog in Residence",
    "age": 2
}
```

This will produce the following codeblock:

{
    "name": "Max, Hedgehog in Residence",
    "age": 2
}

Adding syntax highlighting

Syntax highlighting can be added by specifying a language for the codeblock, which is done by appending the name of the language directly after the opening backticks or tildes as shown below.

```json
{
    "name": "Max, Hedgehog in Residence",
    "age": 2
}
```

This will produce the following output:

{
    "name": "Max, Hedgehog in Residence",
    "age": 2
}

Supported languages

Here is a list of all the languages that are supported in codeblocks:

Frontend

Backend

Misc.

Note: If you want syntax highlighting for a snippet in another language, feel free to add your language to the imports here and open a PR.

Multiple code snippets in one block

With PostHog's MultiLanguage component, it's possible to group multiple code snippets together into a single block.

<MultiLanguage>

```js
console.log("Hello world!")
```

```html
<div>Hello world!</div>
```

</MultiLanguage>

Note: Make sure to include empty lines between all your code snippets, as well as above and below the MultiLanguage tag

This will render the following codeblock:

console.log("Hello world!")

Specifying which file a snippet is from

You can specify a filename that a code snippet belongs to using the file parameter, which will be displayed in the top bar of the block.

```yaml file=values.yaml
cloud: 'aws'
ingress:
    hostname: <your-hostname>
    nginx:
        enabled: true
cert-manager:
    enabled: true
```

Note: Make sure not to surround your filename in quotes. Each parameter-value pair is delimited by spaces.

This produces the following codeblock:

cloud: 'aws'
ingress:
    hostname: <your-hostname>
    nginx:
        enabled: true
cert-manager:
    enabled: true