Markdown Reference

Features and syntax of Markdown in Vocs

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

Terminal

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'Cannot assign to 'title' because it is a read-only property.
 
Number.pparseFloat
parseInt
prototypearseInt('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

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

Hello world.

Markdown

import { Example } from './components/Example'
 
:::code-group
 
<div data-title="Preview">
  <Example />
</div>
 
```tsx [example.tsx]
<div>test</div>
```
 
:::

Details

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

alt text

Inline Code

Inline code has back-ticks around it.

Inline code with link.

Inline console.log("hello world") highlighted code

Links

Internal link

External link

www.example.com, https://example.com, and contact@example.com.

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.
Actual numbers don't matter, just that it's a number
1. Ordered sub-list
  1. Ordered sub-list
2. Ordered sub-list
3. 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

console.log

console.log('hello world')

Step three

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 |