129 lines
2.7 KiB
TypeScript
129 lines
2.7 KiB
TypeScript
import type { Plugin } from 'vite';
|
|
import hljs from 'highlight.js';
|
|
import MarkdownIt from 'markdown-it';
|
|
import { createRequire } from 'node:module';
|
|
|
|
const isMd = (id: string) => /\.md$/.test(id);
|
|
|
|
function markdownCardWrapper(htmlCode: string) {
|
|
const group = htmlCode
|
|
.replace(/<h3/g, ':::<h3')
|
|
.replace(/<h2/g, ':::<h2')
|
|
.split(':::');
|
|
|
|
return group
|
|
.map((fragment) => {
|
|
if (fragment.indexOf('<h3') !== -1) {
|
|
return `<div class="van-doc-card">${fragment}</div>`;
|
|
}
|
|
|
|
return fragment;
|
|
})
|
|
.join('');
|
|
}
|
|
|
|
function markdownHighlight(str: string, lang: string) {
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
// https://github.com/highlightjs/highlight.js/issues/2277
|
|
return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
const initMarkdownIt = () => {
|
|
const md = new MarkdownIt({
|
|
html: true,
|
|
linkify: true,
|
|
typographer: false,
|
|
highlight: markdownHighlight,
|
|
});
|
|
|
|
const require = createRequire(import.meta.url);
|
|
const { slugify } = require('transliteration');
|
|
const markdownItAnchor = require('markdown-it-anchor');
|
|
|
|
markdownLinkOpen(md);
|
|
|
|
md.use(markdownItAnchor, {
|
|
level: 2,
|
|
slugify,
|
|
});
|
|
|
|
return md;
|
|
};
|
|
|
|
const markdownToVue = ({
|
|
id,
|
|
raw,
|
|
md,
|
|
}: {
|
|
id: string;
|
|
raw: string;
|
|
md: MarkdownIt;
|
|
}) => {
|
|
let html = md.render(raw, { id });
|
|
html = `<div class="van-doc-markdown-body">${html}</div>`;
|
|
html = markdownCardWrapper(html);
|
|
// escape curly brackets
|
|
html = html.replace(/<code(.*?)>/g, '<code$1 v-pre>');
|
|
return `<template>${html}</template>`;
|
|
};
|
|
|
|
// add target="_blank" to all links
|
|
function markdownLinkOpen(md: MarkdownIt) {
|
|
const defaultRender = md.renderer.rules.link_open;
|
|
|
|
md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
|
const aIndex = tokens[idx].attrIndex('target');
|
|
|
|
if (aIndex < 0) {
|
|
tokens[idx].attrPush(['target', '_blank']); // add new attribute
|
|
}
|
|
|
|
if (defaultRender) {
|
|
return defaultRender(tokens, idx, options, env, self);
|
|
}
|
|
|
|
return self.renderToken(tokens, idx, options);
|
|
};
|
|
}
|
|
|
|
export function vitePluginMd(): Plugin {
|
|
const md = initMarkdownIt();
|
|
|
|
return {
|
|
name: 'vite-plugin-md',
|
|
|
|
enforce: 'pre',
|
|
|
|
transform(raw, id) {
|
|
if (!isMd(id)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
return markdownToVue({ id, raw, md });
|
|
} catch (e: any) {
|
|
this.error(e);
|
|
}
|
|
},
|
|
|
|
async handleHotUpdate(ctx) {
|
|
if (!isMd(ctx.file)) {
|
|
return;
|
|
}
|
|
|
|
const defaultRead = ctx.read;
|
|
|
|
ctx.read = async function () {
|
|
const raw = await defaultRead();
|
|
return markdownToVue({
|
|
id: ctx.file,
|
|
raw,
|
|
md,
|
|
});
|
|
};
|
|
},
|
|
};
|
|
}
|