fannypack
Version:
An accessible, composable, and friendly React UI Kit
94 lines (67 loc) • 1.82 kB
text/mdx
---
name: Code
route: /typography/code
menu: Typography
---
import { Playground, PropsTable } from 'docz';
import { Box } from '../primitives/index';
import Code from './index';
import HighlightedCode from './HighlightedCode';
# Code
## Import
`import { Code, HighlightedCode } from 'fannypack'`
## Basic Usage
`<Code>` renders a `<code>` element by default with reset styles and theme styles.
<Playground>
<Code>Hello world!</Code>
</Playground>
## Code blocks
A code block can be rendered by setting the `isBlock` prop. This will wrap the code in a `<pre>`.
<Playground>
<Code isBlock>
{`function log(message) {
console.log(message);
}`}
</Code>
</Playground>
## Highlighted code
The `<HighlighedCode>` component uses [Prism](https://prismjs.com/) under the hood. To highlight a language, specify the `lang` prop.
<Playground>
<HighlightedCode lang="javascript">
{`console.log('Hello world')`}
</HighlightedCode>
<HighlightedCode isBlock lang="html" marginTop="medium">
{`<body>
<div class="content">Hello world</div>
</body>`}
</HighlightedCode>
</Playground>
You can also pass a `showLabel` prop to show a label of the language in the top right corner:
<Playground>
<HighlightedCode isBlock lang="javascript" showLabel>
{`function log(message) {
console.log(message);
}`}
</HighlightedCode>
</Playground>
and show line numbers with `showLineNumbers`:
<Playground>
<HighlightedCode isBlock lang="javascript" showLineNumbers>
{`function log(message) {
console.log(message);
}`}
</HighlightedCode>
</Playground>
## `<Code>` Props
<PropsTable of={Code} />
## `<HighlightedCode>` Props
<PropsTable of={HighlightedCode} />
## Theming
### Schema
```jsx
{
base: string | Object,
block: string | Object,
inline: string | Object
}
```