Skip to main content

Components

About 4 minMarkdownComponentsMarkdown

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

Available components:

  • ArtPlayer
  • AudioPlayer
  • Badge
  • BiliBili
  • CodePen
  • FontIcon
  • PDF
  • Replit
  • SiteInfo
  • StackBlitz
  • VideoPlayer
  • YouTube

By default, <Badge /> and <FontIcon /> is enabled.

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

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      components: {
        // components you want
        components: [
          "AudioPlayer",
          "Badge",
          "BiliBili",
          "CodePen",
          "PDF",
          "Replit",
          "StackBlitz",
          "VideoPlayer",
          "YouTube",
        ],
      },
    },
  }),
});







 
 
 














ArtPlayer

A video player:

Loading...
<ArtPlayer src="https://mse-demo.u2sb.com/caminandes_03_llamigos_720p.mp4" />

A video player with poster:

Loading...
<ArtPlayer
  src="https://mse-demo.u2sb.com/caminandes_03_llamigos_720p.mp4"
  poster="/poster.svg"
/>

A video player with custom settings:

Loading...
<ArtPlayer
  src="https://mse-demo.u2sb.com/caminandes_03_llamigos_720p.mp4"
  airplay
  aspect-ratio
  auto-size
  auto-orientation
  auto-playback
  fast-forward
  flip
  fullscreen-web
  lock
  loop
  is-live
  muted
  mini-progress-bar
  pip
  screenshot
  subtitle-offset
/>

See ArtPlayer page for available props.

AudioPlayer

An audio player:

An audio
<AudioPlayer src="/assets/sample.mp3" />

An audio player with poster and title:

A Sample Audio
A Sample Audio
<AudioPlayer
  src="/assets/sample.mp3"
  title="A Sample Audio"
  poster="/logo.svg"
/>

See AudioPlayer page for available props.

Badge

A badge component.

  • tip
  • warning
  • danger
  • info
  • note

See Badge page for available props.

BiliBili

Embed BiliBili videos in Markdown files.

A bilibili video:

A BiliBili video
<BiliBili bvid="BV1kt411o7C3" />

A bilibili video with custom settings:

A BiliBili video
<BiliBili aid="34304064" cid="109293122" ratio="9:16" time="60" autoplay page="2" />

See BiliBili page for available props.

CodePen

A component which allows you to embed CodePen demo.

A demo with user and slug hash:

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

A demo with link:

See the Pen Solar System animation - Pure CSS by kowlor on CodePen.
<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:

See the Pen Solar System animation - Pure CSS by keginaring on CodePen.
<CodePen
  link="https://codepen.io/kowlor/pen/ZYYQoy"
  title="Envelope w/ Hearts"
  status="clicktorun"
  :default-tab="['css','result']"
  :theme="$isDarkmode? 'dark': 'light'"
/>

See CodePen page for available props.

FontIcon

Component which allows you to display font icons.

  • Home icon:
  • A big and green share icon: 
- Home icon: <FontIcon icon="home" />
- A big and green share icon: <FontIcon icon="share" color="#3eaf7c" size="32" />

See FontIcon page for available props.

PDF

PDF viewer component.

Default PDF viewer:

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

PDF viewer starting with page 2 and without toolbar:

<PDF url="/assets/sample.pdf" page="2" no-toolbar />

See PDF page for available props.

Replit

An embedded repl:

<Replit user="FuckDoctors" repl="Java-Test" />

An embedded repl with opening file:

<Replit user="FuckDoctors" repl="Java-Test" file="Main.java" />

A repl link:

<Replit user="FuckDoctors" repl="Java-Test" plain />

SiteInfo

Basic site info:

Mr.Hope's Blog
<SiteInfo name="Mr.Hope's Blog" url="https://mrhope.site" preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg" />

Site info with more properties:

Mr.Hope's Blog
Where there is light, there is hope
<SiteInfo
  name="Mr.Hope's Blog"
  desc="Where there is light, there is hope"
  url="https://mrhope.site"
  logo="https://mrhope.site/logo.svg"
  repo="https://github.com/Mister-Hope/Mister-Hope.github.io"
  preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg"
/>

See SiteInfo 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 StackBlitz page for available props.

VideoPlayer

Embed videos in Markdown files.

A video player:

A video
<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:

A video
<VideoPlayer
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f1/Sintel_movie_4K.webm/Sintel_movie_4K.webm.1080p.vp9.webm"
  poster="/assets/poster.svg"
  :tracks="[
    {
      default: true,
      src: '/assets/subtitles/en.vtt',
      kind: 'subtitles',
      label: 'English',
      srcLang: 'en',
    },
    {
      src: '/assets/subtitles/fr.vtt',
      kind: 'subtitles',
      label: 'French',
      srcLang: 'fr',
    },
  ]"
/>

See VideoPlayer page for available props.

YouTube

Embed YouTube video in Markdown files.

A YouTube video:

A YouTube video
<YouTube id="0JJPfz5dg20" />

A YouTube video with custom settings:

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

A YouTube play list:

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

See YouTube page for available props.

MIT Licensed | Copyright © 2019-present Mr.Hope