Typography Page

H1 Title

H2 Title

H3 Title

H4 Title

H5 Title

H6 Title

Paragraph, easy.

This is bold text

This is italic text

~~Strikethrough~~

Blockquotes

Develop. Preview. Ship. - Vercel

Quote? Wow. This should be multiline. Quote for a better explanation and a fast memorization.

Lists

Unordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Ok fine.

Now let's test the paragraph styles. strong: strong italic: italic delete: ~~delete~~ emphasis: emphasis

Links: B3nab Web Space that probably are inline. XD Hopefully!

List:

default
rendered
list

and with:

numbered
list
as
this

Code

Inline code

Inlined syntax highlighting is also supported let x = 1 via:

Some code snippets:

git clone https://some-online-repo.idk

const bool: boolean = true

import React from 'react'
 
export const Home = ({}) => {
    const title = 'Site'
    let n = 27
 
    return (
        <h1>{title}</h1>
        <Content>
            <p>Paragraph.</p>
        </Content>
    )
}

[0;90m┌[0m  [0;36;1mWelcome to VitePress![0m[0m
[0;90m│[0m[0m
[0;32m◇[0m  Where should VitePress initialize the config?[0m
[0;90m│[0m  [0;2m./docs[0m[0m
[0;90m│[0m[0m
[0;32m◇[0m  Site title:[0m
[0;90m│[0m  [0;2mMy Awesome Project[0m[0m
[0;90m│[0m[0m
[0;32m◇[0m  Site description:[0m
[0;90m│[0m  [0;2mA VitePress Site[0m[0m
[0;90m│[0m[0m
[0;36m◆[0m  Theme:[0m
[0;36m│[0m  [0;32m●[0m Default Theme [0;2m(Out of the box, good-looking docs)[0m[0m
[0;36m│[0m  [0;2m○[0m [0;2mDefault Theme + Customization[0m[0m
[0;36m│[0m  [0;2m○[0m [0;2mCustom Theme[0m[0m
[0;36m└[0m

Title

./example-file.ts

const bool: boolean = true

Caption

const bool: boolean = true

Some text displayed under the code

Both Title & Caption

./example-file.ts

const some_const = 'idk'

Some text displayed under the code

For transformers with @shiki/transformers

transformerNotationDiff

console.log('hewwo') 
console.log('hello') 
console.log('goodbye')

transformerNotationHighlight

console.log('Not highlighted')
console.log('Highlighted') 
console.log('Not highlighted')

console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')

transformerNotationWordHighlight

// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World

// [!code word:Hello:1]
const message = 'Hello World'
console.log(message) // prints Hello World

transformerNotationFocus

console.log('Not focused')
console.log('Focused') 
console.log('Not focused')

console.log('Focused')
console.log('Focused')
console.log('Not focused')

transformerNotationErrorLevel

console.log('No errors or warnings')
console.error('Error') 
console.warn('Warning')

transformerMetaHighlight

console.log('1')
console.log('2')
console.log('3')
console.log('4')

transformerMetaWordHighlight

const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World

transformerCompactLineOptions

Support for shiki's lineOptions that is removed in shiki.

transformerRemoveLineBreak

Remove line breaks between <span class="line">. Useful when you set display: block to .line in CSS.

transformerRemoveNotationEscape

Transform // [!code ...] to // [!code ...]. Avoid rendering the escaped notation syntax as it is.

Tables

Option	Description
First	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Second	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

MDX Components