🎨

Extended Markdown Editor - Typography

Introduction

Welcome! If you navigate to the editor (after logging in with Google) you can create pages like this one by using a mixture of markdown and extra components.

Shortcuts and Commands

⇧ B toggles sidebar.
K toggles search.
E toggles preview.
- ⇧ E toggles fullscreen preview.
Editor shortcuts (while typing in editor):
- / opens command pallet, search for any markdown or component syntax without needing to memorize.
  - Also search for any icon () and special key binding ( ).
  - Search "Upload Image" to download an image and have the markdown automatically generated to point to your freshly uploaded image!
- B bold (also works for highlighted characters).
- I italic (also works for highlighted characters).
- V paste formatted text gets translated and pasted as markdown.

Colors

For any color properties, here are your options:

Color	Description
`primary`	Main brand color, used as the default color for components.
`secondary`	Secondary color to complement the primary color.
`success`	Used for success states.
`warning`	Used for warning states.
`info`	Used for informational states.
`neutral`	Neutral color for backgrounds, text, etc.

Markdown Components

`h1`

This is an h1

`h2`

This is an h2

`h3`

This is an h3

`a` (link)

Nuxt documentation

`blockquote`

While Nuxt UI is free and open source, Nuxt UI Pro is a premium product that helps sustain Nuxt OSS development, check out the License section to learn more.

`strong`

strong text (can be triggered with B)

`em`

Emphasized text (can be triggered with I)

`s` (strikethrough)

~~The world is flat~~ We now know that the world is round.

`mark` (highlighted)

I need to highlight these very important words.

`sup` (superscript)

x² is a square

`sub` (subscript)

H₂O

`ul` (unordered list)

I'm a list item.
- I'm nested.
I'm the last list item.

`ol` (ordered list)

I'm a list item.
1. I'm another list item. Use tab ⇥ or 2 spaces to indent for a nested list
I'm the last list item.

`hr` (horizontal rule)

`table`

Prop	Default	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

`img` (image)

`code`

Inline code

inline code

You can style inline code with any of the colors

inline code

Syntax highlight inline code by adding a language using the lang prop:

const isFalse = (b: boolean) => !b

Prop	Default	Type
`lang`		`string`
`color`	`neutral`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`

pre (code block)

Syntax highlight by adding a language

    
      
        const isFalse = (b: boolean) => {
      

          return !b
      

        }

Add a name or filename:

is-true.ts

    
      
        const isTrue = (b: boolean) => {
      

          return b
      

        }

Inline Math

Energy $e$ and mass $m$ are related in the following way: $e = mc^2$

Math Blocks

y = \sum_{i=0}^{n-1} (1 + r/12)^{12n} - \sum_{i=0}^{n-1} r_0^i - r_0^n

Components

Youtube

Just add a link to a youtube video and it will render as a playable video on the page

Accordion

Prop	Default	Type
`type`	`"single"`	`"multiple" \| "single"`

Badge

Label here

Prop	Default	Type
`color`	`"primary"`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`

Callout

Lorem velit voluptate ex reprehenderit ullamco et culpa.

Prop	Default	Type
`color`	`"neutral"`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`icon`		`string`
`link`		`string`

You can also use the note, tip, warning and caution shortcuts with pre-defined icons and colors:

Here's some additional information.

Here's a helpful suggestion.

Be careful with this action as it might have unexpected results.

This action cannot be undone.

Card

Icons

Click here to see icons.

Card Group

Dashboard

A dashboard with multi-column layout.

SaaS

A template with landing, pricing, docs and blog.

Docs

A documentation with @nuxt/content.

Landing

A landing page you can use as starting point.

Code Collapse

main.css

    
      
        @import "tailwindcss";
      

        @import "@nuxt/ui";
      

        
      

        @theme static {
      

          --font-sans: 'Public Sans', sans-serif;
      

        
      

          --breakpoint-3xl: 1920px;
      

        
      

          --color-green-50: #EFFDF5;
      

          --color-green-100: #D9FBE8;
      

          --color-green-200: #B3F5D1;
      

          --color-green-300: #75EDAE;
      

          --color-green-400: #00DC82;
      

          --color-green-500: #00C16A;
      

          --color-green-600: #00A155;
      

          --color-green-700: #007F45;
      

          --color-green-800: #016538;
      

          --color-green-900: #0A5331;
      

          --color-green-950: #052E16;
      

        }

Prop	Default	Type
`icon`	`'chevron-down'`	`string` The icon displayed to toggle the code.
`name`		`string` The name displayed in the trigger label.
`openText`	`'Expand'`	`string` The text displayed when the code is collapsed.
`closeText`	`'Collapse'`	`string` The text displayed when the code is expanded.
`open`	`false`	`boolean`

Code Group

Wrap your code-blocks around a code-group component to group them together in tabs.

    
      
        pnpm add @nuxt/ui

Prop	Default	Type
`'defaultValue'`	`0`	`number \| string`

Code Tree

app.config.ts

    
      
        export default defineAppConfig({
      

          ui: {
      

            colors: {
      

              primary: 'sky',
      

              colors: 'slate'
      

            }
      

          }
      

        })

Props	Default	Type
`defaultValue`		`string` The default tab to select.
`expandAll`	`false`	`boolean` Expand all directories by default.

Collapsible

Props	Default	Type
`icon`	`'chevron-down'`	`string` The icon displayed to toggle the show/hide button
`name`		`string` The name displayed in the trigger label
`openText`	`'Show'`	`string` The text displayed when the content is collapsed
`closeText`	`'Hide'`	`string` The text disolayed when the content is expanded

Field

A field, prop or parameter to display in your content.

name

stringrequired

The description can be set here with inline markdown support.

Prop	Default	Type
`name`		`string`
`type`		`string`
`required`	`false`	`boolean`

Field Group

analytics

boolean

Default to false - Enables analytics for your project (coming soon).

blob

boolean

Default to false - Enables blob storage to store static assets, such as images, videos and more.

cache

boolean

Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction

database

boolean

Default to false - Enables SQL database to store your application's data.

Icon

Find icon names from heroicons or just type / and search for the icon you are looking for.

Icons can be displayed inline:

Prop	Default	Type
`name`		`string`

Key Binding

Search for special keys by typing / such as and ⇧

Search by pressing K

Prop	Default	Type
value		string

Tabs

Use the tabs and tabs-item components to display tabs in your content.

    
      
        ::callout
      

        Lorem velit voluptate ex reprehenderit ullamco et culpa.
      

        ::

Props	Default	Type
`defaultValue`	`0`	`string`

Steps

Wrap your headings with the Steps component to display a list of steps.

Use the level prop to define which heading will be used for the steps.

Add the Nuxt UI Pro module in your `nuxt.config.ts`

nuxt.config.ts

    
      
        export default defineNuxtConfig({
      

          modules: ['@nuxt/ui']
      

        })

Import Tailwind CSS and Nuxt UI Pro in your CSS

assets/css/main.css

    
      
        @import "tailwindcss";
      

        @import "@nuxt/ui";

Step -1 of 0

Prop	Default	Type
`level`	`'3'`	`"3" \| "2" \| "4"`