Code

The Code component parses the metadata passed in from a code-fence in a markdown document and renders several flavors of codeblock.

Simple codeblock

Wrap your code in a code-fence without any metadata. This will render a simple codeblock without code highlighting.

For example this code-fence in markdown:

```
<Button variant="primary" onClick={() => alert("You clicked an info button!")}>
  <IoMegaphone /> Publish!
</Button>
```

will render this codeblock:

<Button variant="primary" onClick={() => alert("You clicked an info button!")}>
  <IoMegaphone /> Publish!
</Button>

Highlighted codeblock

To highlight a block of code, add a language imediately after the opening three back-ticks.

For example this code-fence in markdown:

```python
import numpy as np

a = np.matrix([[-1, 1, 0],[0,-1,1],[0,0,-1]])
b = numpy.linalg.inv(a)

print(a)
print(b)

print(a*b)
```

will render this codeblock:

import numpy as np

a = np.matrix([[-1, 1, 0],[0,-1,1],[0,0,-1]])
b = numpy.linalg.inv(a)

print(a)
print(b)

print(a*b)

Highlight specific lines of code

To draw the readers attention to specific lines of code within the codeblock use the markdown convention of placing the lines of interest within curly brackets following the opening back-ticks and language tag of the code-fence.

For example this code-fence in markdown:

```python {1,4}
import numpy as np

a = np.matrix([[-1, 1, 0],[0,-1,1],[0,0,-1]])
b = numpy.linalg.inv(a)

print(a)
print(b)

print(a*b)
```

will render this codeblock:

import numpy as np

a = np.matrix([[-1, 1, 0],[0,-1,1],[0,0,-1]])
b = numpy.linalg.inv(a)

print(a)
print(b)

print(a*b)

N.B.

• Leave a space between the language and the curly braces (
  • Do this: ```python {1,3-4}
  • Do not do this: ```python{1,3-4}
• Do not leave a space between lines to highlight
  • Do this: ```python {1,3-4}
  • Do not do this: ```python {1, 3-4}

Render a React component and it's code

To render a react a component in a markdown document you must first import the component at the top of the markdown document.

For example:

import { IoMegaphone } from "react-icons/io5"
import { Button } from "@smerth/gatsby-theme-theme-ui"

The theme will now be aware of these components when it comes time to process the markdown.

To display these components and the code used to render them add the display tag after the opening code-fence back-ticks.

For example this code-fence in markdown:

```jsx {1,3} display
<Button variant="primary" onClick={() => alert("You clicked an info button!")}>
  <IoMegaphone /> Publish!
</Button>
```

will render this codeblock:

<Button variant="primary" onClick={() => alert("You clicked an info button!")}>
  <IoMegaphone /> Publish!
</Button>

Add a title to a codeblock

To add a title to a codeblock add a title tag to the code-fence

For example this code-fence in markdown:

```jsx {1,6} display title="A Button component with an icon and an onClick fn."
<Button
  variant="primary"
  onClick={() => alert("Your content has been published!")}
>
  <IoMegaphone /> Publish!
</Button>
```

will render this codeblock:

<Button
  variant="primary"
  onClick={() => alert("Your content has been published!")}
>
  <IoMegaphone /> Publish!
</Button>

Add a file path to a codeblock

To indicate where a block of code originates add a file tag to the code-fence.

For example this code-fence in markdown:

```jsx {1,6} display title="A Button component with an icon and an onClick fn." file="./src/components/Button"
<Button
  variant="primary"
  onClick={() => alert("Your content has been published!")}
>
  <IoMegaphone /> Publish!
</Button>
```

will render this codeblock:

<Button
  variant="primary"
  onClick={() => alert("Your content has been published!")}
>
  <IoMegaphone /> Publish!
</Button>

Display an editable codeblock (react-live)

Sometimes it is useful to give a reader an editable codeblock so the reader can edit the code and props and see the changes update in real-time.

To render a component and a live codeblock add the live tag after the opening back-ticks.

For example this code-fence in markdown:

```jsx live component=Button
<Button
  variant="secondary"
  size="md"
  onClick={() => alert("You clicked an info button!")}
>
  <IoMegaphone /> Publish!
</Button>
```

will render this codeblock:

<Button
  variant="secondary"
  size="md"
  onClick={() => alert("You clicked an info button!")}
>
  <IoMegaphone /> Publish!
</Button>

N.B.

Note the addition of the component tag which formats and title with a presumed path to the components folder. You can use the title and file tag with the above live codeblock as you see fit.

<Button
  variant="secondary"
  size="md"
  onClick={() => alert("You clicked an info button!")}
>
  <IoMegaphone /> Publish!
</Button>

N.B.

• Be aware, if the component tag is present it will replace the title and file tags even if they are also provided.
• Be aware you cannot highlight specific lines of code in a live codeblock at this time (maybe later?)

Mix it up!

Use whatever combination of tags you need in order to display a codeblocks that fit with the objectives of your text.