Components

  • Markdown
  • Components
  • Markdown
About 3 min

By using vuepress-plugin-components, you can import and use some components in your Markdown files.

Available components:

  • Badge
  • BiliBili
  • CodePen
  • FontIcon
  • PDF
  • StackBlitz
  • VideoPlayer
  • YouTube By default, <Badge /> and <FontIcon /> is enabled.

To enable components, you should set plugin.components with an array of components name.

Badge

A badge component.

  • tip
  • warning
  • danger
  • info
  • note

See Badgeopen in new window page for available props.

BiliBili

Embed BiliBili videos in Markdown files.

A bilibili video:

<BiliBili bvid="BV1kt411o7C3" />

A bilibili video with start time and page:

<BiliBili bvid="BV1kt411o7C3" :ratio="9/16" :time="60" :page="2" />

A bilibili video with custom settings:

<BiliBili bvid="BV1kt411o7C3" :high-quality="false" :danmaku="false" />

See BiliBiliopen in new window page for available props.

CodePen

A component which allows you to embed CodePen demo.

A demo with user and slug hash:

<CodePen
  user="kowlor"
  slug-hash="ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

A demo with link:

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Solar System animation - Pure CSS"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

A click to run demo:

<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Envelope w/ Hearts"
  status="clicktorun"
  :default-tab="['css','result']"
  :theme="$isDarkMode? 'dark': 'light'"
/>

See CodePenopen in new window page for available props.

FontIcon

Component which allows you to display font icons.

  • Home icon:
  • A big and red markdown icon:
- Home icon: <FontIcon icon="home" />
- A big and red markdown icon: <FontIcon icon="markdown" color="red" :size="32" />

See FontIconopen in new window page for available props.

PDF

PDF viewer component.

Default PDF viewer:

<PDF url="/sample.pdf" />

PDF viewer without toolbar:

<PDF url="/sample.pdf" :toolbar="false" />

PDF viewer with initial page 2:

<PDF url="/sample.pdf" :page="2" />

See PDFopen in new window page for available props.

StackBlitz

Embed StackBlitz demo in Markdown files.

A StackBlitz project:

<StackBlitz id="vuepress-theme-hope" />

A StackBlitz project with custom settings:

<StackBlitz id="vuepress-theme-hope" hideExplorer hideNavigation hidedevtools />

See StackBlitzopen in new window page for available props.

VideoPlayer

Embed videos in Markdown files.

A video player:

<VideoPlayer src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm" />

A video player with tracks and poster:

<VideoPlayer
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
  poster="/poster.svg"
  :tracks="[
    {
      default: true,
      src: 'https://gist.githubusercontent.com/wheatjs/a85a65a82d87d7c098e1a0972ef1f726/raw',
      kind: 'subtitles',
      label: 'English',
      srcLang: 'en',
    },
    {
      src: 'https://gist.githubusercontent.com/wheatjs/38f32925d20c683bf77ba33ff737891b/raw',
      kind: 'subtitles',
      label: 'French',
      srcLang: 'fr',
    },
  ]"
/>

See VideoPlayeropen in new window page for available props.

YouTube

Embed YouTube video in Markdown files.

A YouTube video:

<YouTube id="0JJPfz5dg20" />

A YouTube video with custom settings:

<YouTube id="0JJPfz5dg20" disable-fullscreen />

A YouTube play list:

<YouTube list-type="playlist" list="PLJNLwTPak6dhCRzVelZIs2-DfBp01NX_1" />

See YouTubeopen in new window page for available props.

Loading...