Use Syntax Highlighted Code Blocks

These features are provided by prism-react-renderer and react-live and are available for you to use in any MDX file.

💡 If you want to customize styles or add additional language tabs, you need to shadow the file src/@shetharp/gatsby-theme-polaroid/styles/code.ts.

Language tabs:

When you add a language (such as e.g. js or javascript) to the code block, a little tab will appear at the top left corner.

```js
// code goes here
```

Code titles:

You can display a title (e.g. the file path) above the code block.

```jsx:title=your-title
// code goes here
```

Or without a specific language:

```:title=your-title
// code goes here
```

Line highlighting:

You can highlight single or multiple (or both) lines in a code block. You need to add a language.

```js {2,4-5}
const test = 3;
const foo = "bar";
const harry = "potter";
const hermione = "granger";
const ron = "weasley";
```

Hide line numbers:

If you want to hide line numbers you can either globally disable them (see Theme options) or on a block-by-block basis. You can also combine that with the other attributes.

```noLineNumbers
// code goes here
```