up

Author: HugoRCD

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

@@ -37,7 +37,7 @@ Each title and subtitle creates an anchor and shows up automatically in the tabl
 
 ## Text Formatting
 
-Nuxt UI Pro supports most markdown formatting options.
+Nuxt UI Pro supports most Markdown formatting options.
 
 | Style  | How to use   | Result     |
 |--------|--------------|------------|

content/2.essentials/2.code-blocks.md

@@ -102,9 +102,44 @@ export default defineAppConfig({
 
 ::
 
+#### Highlight Line
+
+To highlight lines of code, add `{}` around the line numbers you want to highlight.
+
+::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
+
+```ts [nuxt.config.ts]{4-5}
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+
+#code
+
+````mdc
+```ts [nuxt.config.ts]{4-5}
+export default defineAppConfig({
+  ui: {
+    icons: {
+      copy: 'i-lucide-copy',
+      copyCheck: 'i-lucide-copy-check'
+    }
+  }
+})
+```
+````
+
+::
+
+
 ## Advanced
 
-### Code Group
+### CodeGroup
 
 Wrap your code-blocks around a `code-group` component to group them together in a tabbed interface.
 
@@ -160,7 +195,7 @@ bun add @nuxt/ui-pro@next
 Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button.
 ::
 
-### Code Tree
+### CodeTree
 
 Wrap your code-blocks with a `code-tree` component in any particular order to display a tree view of your files.
 
@@ -323,3 +358,101 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
 ::note{to="https://ui3.nuxt.dev/getting-started/typography#codetree" target="_blank"}
 Learn more about the `code-tree` component.
 ::
+
+### `CodePreview`
+
+To display a code block with he's preview, use the `code-preview` component. Write the code to be previewed in a the `default` slot and the actual code in the `code` slot.
+
+::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full" label="Preview"}
+
+::code-preview{class="[&>div]:*:my-0"}
+`inline code`
+
+#code
+
+```mdc
+`inline code`
+```
+
+::
+
+#code
+
+````mdc
+::code-preview
+`inline code`
+
+#code
+```mdc
+`inline code`
+```
+::
+````
+
+::
+
+### `CodeCollapse`
+
+Use the `code-collapse` component to display a long code block in a collapsible format.
+
+::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"}
+
+::code-collapse{class="[&>div]:my-0"}
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme {
+  --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;
+}
+```
+
+::
+
+#code
+
+````mdc
+::code-collapse
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme {
+  --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;
+}
+```
+
+::
+````
+
+::

content/2.essentials/3.images-embeds.md

@@ -0,0 +1,66 @@
+---
+title: Images and Embeds
+description: Add image, video, and other HTML elements
+---
+
+## Image
+
+### Using Markdown
+
+::code-preview
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+
+#code
+
+```mdc
+![Nuxt Social Image](https://nuxt.com/new-social.jpg)
+```
+
+::
+
+Or with your local images
+
+::code-preview
+![Social Card](/social-card.png)
+
+#code
+
+```mdc
+![Social Card](/social-card.png)
+```
+
+::
+
+::note
+If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `<NuxtImg>` component will be used instead of the native `img` tag.
+::
+
+### Using Embeds
+
+To get more customizability with images, you can also use embeds to add images
+
+::code-preview
+<img src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150">
+
+#code
+
+```mdc
+<img src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150">
+```
+
+::
+
+## Embeds and HTML elements
+
+You can also use embeds to add videos, iframes, etc.
+
+::code-preview{class="[&>div]:*:w-full"}
+<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-[calc(var(--ui-radius)*1.5)]"></iframe>
+
+#code
+
+```mdc
+<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-[calc(var(--ui-radius)*1.5)]"></iframe>
+```
+
+::