up

Author: HugoRCD

content/2.essentials/1.markdown-syntax.md

@@ -5,8 +5,6 @@ description: Text, title, and styling in standard markdown.
 
 ## Titles
 
-Best used for page titles, headers, and sidebars.
-
 ::code-preview{class="[&>div]:*:my-0"}
 
 ## Titles
@@ -21,8 +19,6 @@ Best used for page titles, headers, and sidebars.
 
 ### Subtitles
 
-Best used for page titles, headers, and sidebars.
-
 ::code-preview{class="[&>div]:*:my-0"}
 
 ### Subtitles
@@ -57,70 +53,166 @@ You can also combine them:
 | Bold Strike   | `~~**bold**~~`      | ~~**Bold**~~      |
 | Italic Strike | `~~*italic*~~`      | ~~*Italic*~~      |
 
-## Blockquotes
+You need to use HTML to write superscript and subscript text. Add `sup` or `sub` around your text to create superscript or subscript.
 
-### Singleline
+| Style       | How to use               | Result                 |
+|-------------|--------------------------|------------------------|
+| Superscript | `<sup>superscript</sup>` | <sup>superscript</sup> |
+| Subscript   | `<sub>subscript</sub>`   | <sub>subscript</sub>   |
 
-To create a blockquote, add a `>` in front of a paragraph.
+## Links
+
+To create a link, wrap the link text in brackets `[]()`.
 
 ::code-preview{class="[&>div]:*:my-0"}
 
-> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt)
 
 #code
 
 ```mdc
-> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt)
 ```
 
 ::
 
-### Multiline
+### Links to other pages
+
+Links to other pages of your documentation needs to be root-relative. For example, if you have a page called `getting-started/installation`, the link to that page should be `[Installation](/getting-started/installation)`.
 
 ::code-preview{class="[&>div]:*:my-0"}
 
-> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
-> 
-> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
+[Installation](/getting-started/installation)
 
 #code
 
 ```mdc
-> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
-> 
-> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
+[Installation](/getting-started/installation)
 ```
 
 ::
 
-## Links
+## Lists
 
-To create a link, wrap the link text in brackets `[]()`.
+### Unordered
+
+To create an unordered list, start each item with a `-`.
 
 ::code-preview{class="[&>div]:*:my-0"}
 
-[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt)
+- I'm a list item.
+- I'm another list item.
+- I'm the last list item.
 
 #code
 
 ```mdc
-[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt)
+- I'm a list item.
+- I'm another list item.
+- I'm the last list item.
 ```
 
 ::
 
-### Links to other pages
+### Ordered
 
-Links to other pages of your documentation needs to be root-relative. For example, if you have a page called `getting-started/installation`, the link to that page should be `[Installation](/getting-started/installation)`.
+To create an ordered list, start each item with a number.
 
 ::code-preview{class="[&>div]:*:my-0"}
 
-[Installation](/getting-started/installation)
+1. I'm a list item.
+2. I'm another list item.
+3. I'm the last list item.
 
 #code
 
 ```mdc
-[Installation](/getting-started/installation)
+1. I'm a list item.
+2. I'm another list item.
+3. I'm the last list item.
+```
+
+::
+
+### Nested
+
+To create a nested list, indent each item with four spaces.
+
+::code-preview{class="[&>div]:*:my-0"}
+
+- I'm a list item.
+  - I'm a nested list item.
+  - I'm another nested list item.
+- I'm another list item.
+
+#code
+
+```mdc
+- I'm a list item.
+  - I'm a nested list item.
+  - I'm another nested list item.
+- I'm another list item.
+```
+
+::
+
+## Tables
+
+To create a table, use three or more hyphens (`---`) to separate each column.
+
+::code-preview{class="[&>div]:*:my-0"}
+
+| Prop    | Default   | Type                     |
+|---------|-----------|--------------------------|
+| `name`  |           | `string`{lang="ts-type"} |
+| `size`  | `md`      | `string`{lang="ts-type"} |
+| `color` | `neutral` | `string`{lang="ts-type"} |
+
+#code
+
+```mdc
+| Prop    | Default   | Type                     |
+|---------|-----------|--------------------------|
+| `name`  |           | `string`{lang="ts-type"} |
+| `size`  | `md`      | `string`{lang="ts-type"} |
+| `color` | `neutral` | `string`{lang="ts-type"} |
 ```
 
 ::
+
+## Blockquotes
+
+### Singleline
+
+To create a blockquote, add a `>` in front of a paragraph.
+
+::code-preview{class="[&>div]:*:my-0"}
+
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+
+#code
+
+```mdc
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+```
+
+::
+
+### Multiline
+
+::code-preview{class="[&>div]:*:my-0"}
+
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+> 
+> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
+
+#code
+
+```mdc
+> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.
+> 
+> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro.
+```
+
+::
+