@nnnb/markdown v0.1.0

Vue Markdown and Code Highlighting Components

This package provides Vue components that extend Markdown functionality to support custom HTML-like tags in your markdown content and offers code syntax highlighting capabilities.

Installation

npm install @nnnb/markdown
# or
yarn add @nnnb/markdown

Components

This package includes two main components:

1. Markdown Component: Renders markdown content with support for custom HTML-like tags and math expressions
2. Code Highlight Component: Provides syntax highlighting for code blocks

Markdown Component

Features

• 🚀 Support for custom HTML-like tags in markdown
• 🧮 Math expressions support with KaTeX
• 💪 Vue 3 compatible
• 🎨 Fully customizable components
• 📝 Markdown syntax support
• ⚡ High performance

Basic Usage

<template>
  <VueMarkdown :source="markdownContent" :customElements="customTags" />
</template>

<script setup>
  import { VueMarkdown } from '@nnnb/markdown';

  const customTags = ['think', 'custom', 'note'];
  const markdownContent = `
# Hello World

<think>
This content will be rendered inside a think component
</think>

<custom>
This is rendered in a custom component
</custom>

<note>
This is a note
</note>
`;
</script>

Props

Advanced Usage

Custom Components

You can provide custom components to render your custom tags:

<template>
  <VueMarkdown
    :source="markdownContent"
    :customElements="['think', 'custom']"
    :components="customComponents"
  />
</template>

<script setup>
  import { VueMarkdown } from '@nnnb/markdown';
  import ThinkComponent from './components/Think.vue';
  import CustomComponent from './components/Custom.vue';

  const customComponents = {
    think: ThinkComponent,
    custom: CustomComponent
  };

  const markdownContent = `
<think>
This will be rendered using ThinkComponent
</think>

<custom>
This will be rendered using CustomComponent
</custom>
`;
</script>

Math Expressions Support

The Markdown component supports rendering math expressions using KaTeX:

<template>
  <VueMarkdown 
    :source="markdownContent" 
    :math="{
      strict: true,
      remarkOptions: {},
      rehypeOptions: {}
    }" 
  />
</template>

<script setup>
  import { VueMarkdown } from '@nnnb/markdown';
  import 'katex/dist/katex.min.css';

  const markdownContent = `
# Math Example

Inline math: $E = mc^2$

Block math:

$$
\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}
$$
`;
</script>

With Additional Plugins

Code Highlight Component

A Vue component that provides syntax highlighting for code blocks using two rendering engines: highlight.js and refractor.

Features

• 🎨 Support for two rendering engines: highlight.js and refractor
• 🌈 Use highlight.js styles or customize your own in refractor mode
• 🔍 Automatic language detection
• 💪 Vue 3 compatible

Basic Usage with Highlight.js

<template>
  <Highlighter :language="language" :code="code" :autoMatch="false" />
</template>

<script setup>
import { Highlighter } from '@nnnb/markdown';
import 'highlight.js/styles/atom-one-dark.css';

const language = 'javascript';
const code = 'const greeting = "Hello World!";';
</script>

You can use any highlight.js style by importing the corresponding CSS file.

Using Refractor Mode

<template>
  <Highlighter 
    generatorType="refractor"
    :language="language" 
    :code="code" 
    :theme="customTheme" 
  />
</template>

<script setup>
import { Highlighter } from '@nnnb/markdown';

const language = 'javascript';
const code = 'const greeting = "Hello World!";';
const customTheme = {
  // Your custom theme styles
};
</script>

Props

TypeScript Support

The package includes TypeScript definitions. You can import types like this:

import type { MarkdownProps, MarkdownOptions, HighlighterProps } from '@nnnb/markdown';

License

MIT License