Awesome

vite-plugin-naive-ui-md

Markdown for Vite with Naive UI Styles.

Example

Install

With NPM:

npm install vite-plugin-naive-ui-md -D

With Yarn:

yarn add vite-plugin-naive-ui-md -D

With PNPM:

pnpm install vite-plugin-naive-ui-md -D

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import naiveUIMD from "vite-plugin-naive-ui-md";
import hljs from "highlight.js";
// https://vitejs.dev/config/
export default defineConfig({
  root: __dirname,
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/],
    }),
    naiveUIMD({
      hljs: hljs,
      wrapCodeWithCard: true,
    }),
  ],
});

Import Markdown as Vue components

<template>
  <TEST />
</template>

<script setup lang="ts">
  import TEST from "./TEST.md";
</script>
<style>
  #app {
    padding: 40px;
  }
</style>

Import Code Blocks

If you want to use, you should add createCodeBlockRule to your vite.config.ts

import naiveUIMD, { createCodeBlockRule } from "vite-plugin-naive-ui-md";

export default defineConfig({
  root: __dirname,
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/],
    }),
    naiveUIMD({
      hljs: hljs,
      wrapCodeWithCard: true,
      markedSetup: (marked, ctx) => {
        marked.use({
          extensions: [createCodeBlockRule(ctx.filepath)],
        });
      },
    }),
  ],
});

Basic usage

@[code](./foo.js)

@code

Intercept code line range

@[code{1-8} typescript](./env.d.ts)

@code{1-8} typescript

TypeScript Shim

declare module "*.vue" {
  import { ComponentOptions } from "vue";
  const Component: ComponentOptions;
  export default Component;
}

declare module "*.md" {
  import { ComponentOptions } from "vue";
  const Component: ComponentOptions;
  export default Component;
}

TODO

• Test
• TOC