Skip to main content

Components

About 1 minMarkdownComponentsMarkdown

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

Available components:

  • ArtPlayer
  • Badge
  • BiliBili
  • CodePen
  • FontIcon
  • PDF
  • Replit
  • Share
  • StackBlitz
  • SiteInfo
  • VPBanner
  • VPCard
  • VidStack
  • XiGua

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

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

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

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      components: {
        // components you want
        components: [
          "ArtPlayer",
          "Badge",
          "BiliBili",
          "CodePen",
          "PDF",
          "Replit",
          "Share",
          "SiteInfo",
          "StackBlitz",
          "VPBanner",
          "VPCard",
          "VidStack",
          "XiGua",
        ],
      },
    },
  }),
});







 
 
 


















Badge

Badge types
  • tip
  • warning
  • danger
  • info
  • note
- <Badge text="tip" type="tip" vertical="middle" />
- <Badge text="warning" type="warning" vertical="middle" />
- <Badge text="danger" type="danger" vertical="middle" />
- <Badge text="info" type="info" vertical="middle" />
- <Badge text="note" type="note" vertical="middle" />

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" 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 Envelope w/ Hearts by kowlor 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="//theme-hope-assets.vuejs.press/files/sample.pdf" />
PDF viewer starting with page 2 and without toolbar
<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" page="2" no-toolbar />

See PDF page for available props.

Replit

A replit
<Replit user="FuckDoctors" repl="Java-Test" />
A replit with opening file
<Replit user="FuckDoctors" repl="Java-Test" file="Main.java" />
An autoload replit
<Replit user="FuckDoctors" repl="Java-Test" auto-load />
A repl with link
<Replit link="https://replit.com/@FuckDoctors/Java-Test" />

See Replit page for available props.

Share

Basic share
<Share />
Customize services
<Share services="qq,weibo" />
<Share :services="['qq','weibo']" />
Colorful icon
<Share colorful />

See Share page for available props.

SiteInfo

Basic site info
Mr.Hope's Blog
<SiteInfo name="Mr.Hope's Blog" url="https://mister-hope.com" 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://mister-hope.com"
  logo="https://mister-hope.com/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.

VidStack

Install vidstack@1 first.

A video player
<VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
A video player with poster, thumbnail, chapter and tracks
<VidStack
  src="https://media-files.vidstack.io/720p.mp4"
  title="Agent 327 Operation Barber Shop"
  poster="https://media-files.vidstack.io/poster-2.png"
  :sourses="[
    {
      src: 'https://media-files.vidstack.io/720p.mp4',
      type: 'video/mp4',
    },
    {
      src:  'https://media-files.vidstack.io/720p.avi',
      type: 'video/avi',
    },
    {
      src:  'https://media-files.vidstack.io/720p.ogv',
      type: 'video/ogg',
    },
  ]"
  :tracks="[
    {
      src: 'https://media-files.vidstack.io/subs/english.vtt',
      label: 'English',
      language: 'en-US',
      kind: 'subtitles',
      default: true,
    },
    {
      src: 'https://media-files.vidstack.io/subs/spanish.vtt',
      label: 'Spanish',
      language: 'es-ES',
      kind: 'subtitles',
    },
    // Chapters
    {
      src: 'https://media-files.vidstack.io/chapters.vtt',
      kind: 'chapters',
      language: 'en-US',
      default: true,
    },
  ]"
  thumbnails="https://media-files.vidstack.io/thumbnails.vtt"
  crossorigin
/>
An audio player
<VidStack src="//theme-hope-assets.vuejs.press/files/sample.mp3" title="VidStack Audio Demo" />
YouTube player
<VidStack
  src="youtube/_cMxraX_5RE"
  title="VidStack YouTube Demo"
/>

See VidStack page for available props.

ArtPlayer

Install artplayer first.

A video player
<ArtPlayer src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
A video player with poster
<ArtPlayer
  src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
  poster="/poster.svg"
/>
A video player with custom settings:
<ArtPlayer
  src="https://vp-demo.u2sb.com/video/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.

MIT Licensed | Copyright © 2019-present Mr.Hope