Markdown Reference
Blockquote
To create a blockquote, add a >
in front of a paragraph.
Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.
Callouts
Callouts can be rendered using one of the following directives:
:::note
:::info
:::warning
:::danger
:::tip
:::success
Code Blocks
Default
Code can be formatted into blocks using triple backticks (```). Optionally, you can specify the language of the code block for syntax highlighting.
console.log("hello world")
Titles
Code blocks can have titles. The title can be specified in the code block "meta", after the triple backticks.
Preview
npm i vocs
Markdown
```bash [Terminal]
npm i vocs
```
Line focus
The // [!code focus]
marker can be used to focus a line of code.
// 1. Import modules.
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'
// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
chain: mainnet,
transport: http(),
})
// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
Line highlights
The // [!code hl]
marker can be used to highlight a line of code.
type Example = string
const example: Example = 'example'
Line numbers
The showLineNumbers
meta key can be used to show the lines of code beside the pane.
// 1. Import modules.
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'
// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
chain: mainnet,
transport: http(),
})
// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
Twoslash
Vocs supports TypeScript Twoslash syntax. Read more.
interface Todo {
title: string
}
const todo: Readonly<Todo> = {
title: stringtitle: 'Delete inactive users'.toUpperCase(),
}
todo.title = 'Hello'
Number.pparseFloatparseIntprototypearseInt('123', 10)
Word focus
The // [!code word]
marker can be used to focus words in code.
// 1. Import modules.
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'
// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
chain: mainnet,
transport: http(),
})
// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
Diffs
The // [!code ++]
and // [!code --]
markers can be used to show diffs in code.
// 1. Import modules.
import { createPublicClient } from 'viem'
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'
// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
chain: mainnet,
transport: http(),
})
// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
Code Groups
Code groups can be rendered using the :::code-group
directive.
Preview
npm i viem
Markdown
:::code-group
```bash [npm]
npm i viem
```
```bash [pnpm]
pnpm i viem
```
```bash [bun]
bun i viem
```
:::
HTML/React Previews
Preview
Markdown
import { Example } from './components/Example'
:::code-group
<div data-title="Preview">
<Example />
</div>
```tsx [example.tsx]
<div>test</div>
```
:::
Details
See more
gotcha!
Emphasis
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
Headings
Headings are rendered as <h1>
to <h6>
tags corresponding to the number of #
characters in the heading.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Images
Inline Code
Inline code
has back-ticks around
it.
Inline code
with link.
Inline console.log("hello world")
highlighted code
Links
Lists
- First ordered list item
- Another item
- Unordered sub-list.
- Unordered sub-list.
- Unordered sub-list.
- Unordered sub-list.
- Unordered sub-list.
- Unordered sub-list.
- Unordered sub-list.
- Unordered sub-list.
- Actual numbers don't matter, just that it's a number
- Ordered sub-list
- Ordered sub-list
- Ordered sub-list
- Ordered sub-list
- Ordered sub-list
- And another item.
Steps
Preview
Step one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
Step two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
console.log('hello world')
Step three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
Code
::::steps
### Step one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
### Step two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
:::code-group
```tsx [console.log]
console.log('hello world')
```
```tsx [alert]
alert('hello world')
```
:::
:::info
test
:::
### Step three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
::::
Tables
Preview
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
Code
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |