---
id: markdown-features
title: Style Guide - Markdown Features
sidebar_label: Markdown Features
---

import { Dark, Light } from '/src/components/ColorMode';

## Overview

We have developed several [React](https://reactjs.org/) components for assisting with writing documentation.

## Features

### Light/Dark Mode Switch

#### Usage:

```jsx
import { Dark, Light } from '/src/components/ColorMode';
<Dark>
  <p>Dark</p>
</Dark>
<Light>
  <p>Light</p>
</Light>

```

#### Demo:

<Dark>
  <div className="not-prose rounded-lg bg-primary shadow-md">
    <p className="p-2 text-lg font-medium">This is only shown in dark mode.</p>
    <img
      src="https://picsum.photos/id/101/600/200"
      className="w-full rounded-lg shadow-md"
    />
  </div>
</Dark>
<Light>
  <div className="not-prose rounded-lg border bg-primary shadow-md">
    <p className="p-2 text-lg font-medium">This is only shown in light mode.</p>
    <img
      src="https://picsum.photos/id/1028/600/200"
      className="w-full rounded-lg shadow-md"
    />
  </div>
</Light>

### Code Blocks

#### Usage:

Always specify the language used directly after the start of the code block (```).

:::note
For command line examples, please use `shell` and not any of the other aliases.
:::

for further information please see the relevant [Docusaurus page](https://docusaurus.io/docs/markdown-features/code-blocks)

````
```ts title="Demo"
export const typedArrayToBuffer = (array: Uint8Array): ArrayBuffer => {
  return array.buffer.slice(
    array.byteOffset,
    array.byteLength + array.byteOffset
  );
};
```
````

#### Demo:

```ts title="Demo"
export const typedArrayToBuffer = (array: Uint8Array): ArrayBuffer => {
  return array.buffer.slice(
    array.byteOffset,
    array.byteLength + array.byteOffset,
  );
};
```