Skip to content

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: string
title
: 'Delete inactive users'.toUpperCase(),
} todo.title = 'Hello'
Cannot assign to 'title' because it is a read-only property.
Number.p
parseFloat
parseInt
prototype
arseInt('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

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

alt text

Inline Code

Inline code has back-ticks around it.

Inline code with link.

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

Links

Lists

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
      • Unordered sub-list.
        • Unordered sub-list.
      • Unordered sub-list.
    • Unordered sub-list.
    • Unordered sub-list.
  3. 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
  4. 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
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

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1

Code

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |