Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Volankey/vite-plugin-naive-ui-md
https://github.com/Volankey/vite-plugin-naive-ui-md
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/Volankey/vite-plugin-naive-ui-md
- Owner: Volankey
- Created: 2021-11-24T10:23:57.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-30T06:32:10.000Z (about 2 years ago)
- Last Synced: 2024-10-30T23:12:01.613Z (3 months ago)
- Language: TypeScript
- Size: 1.84 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-naive - vite-plugin-naive-ui-md - Markdown for Vite with Naive UI Styles. (List / Related To NaiveUI)
README
# vite-plugin-naive-ui-md
Markdown for Vite with [Naive UI](https://naiveui.com) Styles.
[Example](https://vite-naive-md.netlify.app)
### Install
With NPM:
```ts
npm install vite-plugin-naive-ui-md -D
```
With Yarn:
```ts
yarn add vite-plugin-naive-ui-md -D
```
With PNPM:
```ts
pnpm install vite-plugin-naive-ui-md -D
```
### vite.config.ts
```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
```html
import TEST from "./TEST.md";
#app {
padding: 40px;
}
```
### Import Code Blocks
If you want to use, you should add [createCodeBlockRule](./src/extensions/import-code-block/index.ts) to your vite.config.ts
```typescript
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
```md
@[code](./foo.js)
```
@[code](./foo.js)
#### Intercept code line range
```md
@[code{1-8} typescript](./env.d.ts)
```
@[code{1-8} typescript](./env.d.ts)
### TypeScript Shim
```ts
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