Markdown components

The default theme comes with some Vue.js components you can use directly in your markdown content.

<alert>

Props

  • type
    • Type: String
    • Default: 'info'
    • Values: ['info', 'success', 'warning', 'danger']

Example

<alert>Info alert!</alert>

Result

Info alert!

<code-block>

Props

  • label
    • Type: String
    • required
  • active
    • Type: Boolean
    • Default: false

Example

# Backslashes are for demonstration

<code-group>
  <code-block label="Yarn" active>

  ```bash
  yarn add @jsilva-pt/nuxt-content-theme-blog
  \```

  </code-block>
  <code-block label="NPM">

  ```bash
  npm install @jsilva-pt/nuxt-content-theme-blog
  \```

  </code-block>
</code-group>

Result

yarn add @jsilva-pt/nuxt-content-theme-blog
npm install @jsilva-pt/nuxt-content-theme-blog

<code-sandbox>

Props

  • src
    • Type: String
    • required

Example

---
link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark
---

<code-sandbox :src="link"></code-sandbox>

Result

Loading CodeSandbox...
Edit this page on GitHub Updated at Mon, Mar 15, 2021