Nuxt•4mo ago

How to style markdown files in content

Have purchase Nuxt UI pro, want to create some markdown files like content/test.md

---
title: Introduction
---

Start of text

## a test title

<!--more-->

More text...

component added 

::card{title="Components" icon="i-heroicons-cube-transparent" color="red"}
Discover all the components available in **Nuxt UI Pro**.
::

---
title: Introduction
---

Start of text

## a test title

<!--more-->

More text...

component added 

::card{title="Components" icon="i-heroicons-cube-transparent" color="red"}
Discover all the components available in **Nuxt UI Pro**.
::

and have a [...slug].vue file catch and style these:-

<template>
  <UPage prose>
    <UPageBody>
      <ContentDoc />
    </UPageBody>
  </UPage>
</template>

<template>
  <UPage prose>
    <UPageBody>
      <ContentDoc />
    </UPageBody>
  </UPage>
</template>

The compoent appears - full screen width and the markdown is not styled. Guess I am looking for a example [...slug].vue file - but not finding this easy to locate in docs / google searches.

1 Reply

dwol•4mo ago

try `<ContentDoc class="prose" />

Gaming

Programming

How to style markdown files in content