Markdown

Last updated:

|Edit this page

Codeblocks

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

Basic codeblock

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

MDX
```
{
"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.

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

This will produce the following output:

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

Supported languages

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

Frontend
HTMLhtml
CSS / SCSS / LESScss / less
JavaScriptjs
JSXjsx
TypeScriptts
TSXtsx
Swiftswift
Dartdart
Objective-Cobjectivec
Backend
Node.jsnode
Elixirelixir
Golanggo
Javajava
PHPphp
Rubyruby
Pythonpython
C / C++c / cpp
Misc.
Terminalbash or shell
JSONjson
XMLxml
SQLsql
GraphQLgraphql
Markdownmarkdown
MDXmdx
YAMLyaml
Gitgit

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.

MDX
<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.

MDX
```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:

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

Questions?

Was this page useful?

Next article

Posting a new job listing

Creating a new job Log in to Ashby Hover Jobs Click Admin Click Create Job Fill in the required fields Click Create Draft You will now be on the settings page for the newly created job. Custom fields We use custom fields to connect various data to each job posting. Below is the description and purpose of each. Team Team is the only required custom field. The value selected determines pineapple preference, objectives, mission, team lead, and which team members appear in the sidebar. Timezone…

Read next article