@richmd/vue

Vue component for Richmd - a tool for creating rich content with Markdown.

Installation

# Using npm
npm install @richmd/vue

# Using yarn
yarn add @richmd/vue

# Using pnpm
pnpm add @richmd/vue

Usage with Nuxt

1. Import CSS in your Nuxt app

First, import the required CSS in your Nuxt app. You can do this in your app.vue file or in a plugin:

<script setup>
import "@richmd/vue/dist/richmd.css";
</script>

Alternatively, you can create a plugin in the plugins directory:

// plugins/richmd.ts
import "@richmd/vue/dist/richmd.css";

export default defineNuxtPlugin(() => {
  // Plugin setup if needed
});

2. Use the Richmd component in your pages or components

<script setup>
import { Richmd } from "@richmd/vue";

const markdownText = `# Hello, Richmd!

This is a **bold text** and *italic text*.

## Features
- Rich markdown support
- Easy to use
- Customizable

\`\`\`js
// Code block example
const hello = "world";
console.log(hello);
\`\`\`

> Blockquote example

| Table | Example |
|-------|---------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
`;
</script>

<template>
  <div class="container">
    <Richmd :text="markdownText" class="markdown-content" />
  </div>
</template>

3. Create a markdown editor (optional)

You can create a simple markdown editor with live preview:

<script setup>
import { ref } from "vue";
import { Richmd } from "@richmd/vue";

const text = ref('# Start typing here...');
</script>

<template>
  <div class="flex flex-col md:flex-row gap-4">
    <div class="w-full md:w-1/2">
      <textarea 
        class="w-full h-[500px] p-4 border rounded"
        v-model="text"
      />
    </div>
    <div class="w-full md:w-1/2 border rounded p-4">
      <Richmd :text="text" class="prose" />
    </div>
  </div>
</template>

4. Use the RichmdSlide component (optional)

<script lang="ts">
import { RichmdSlide } from '@richmd/vue';
import "./global.css";
import "@richmd/vue/dist/richmd.css";

export default {
  components: {
    RichmdSlide,
  },
  data() {
    return {
      text: `:use slide:

:---:title.sunset
# Title

subtext
:---:

:<--:content.sunset
# Subtitle

*subtext*
:---:
`,
    };
  },
};
</script>

<template>
  <RichmdSlide :text="text" :is-controller="false" />
</template>

Component API

Richmd

The Richmd component accepts the following props:

Prop	Type	Required	Description
text	string	Yes	The markdown text to render
id	string	No	HTML id attribute for the container div
className	string	No	CSS class name for the container div

RichmdSlide

The RichmdSlide component accepts the following props:

Prop	Type	Required	Description
text	string	Yes	The markdown text to render
is-controller	boolean	No	Toggles the display of the slide controller

Supported Markdown Features

Richmd supports a wide range of markdown features:

• Basic formatting (bold, italic, strikethrough)
• Headings (h1-h6)
• Lists (ordered and unordered)
• Checkbox lists
• Code blocks with syntax highlighting
• Blockquotes
• Tables
• Horizontal rules
• Links and images
• TeX syntax (using KaTeX)
• Color inline blocks
• Dropdown details
• Video (HTML5 video tag)
• Custom HTML tags

For detailed syntax documentation, refer to the Richmd Markdown Syntax Documentation.

License

MIT