try again
This commit is contained in:
parent
c76b25caf2
commit
6733670215
|
|
@ -0,0 +1,17 @@
|
|||
import matter from "gray-matter";
|
||||
import { markdownToHtml } from "./markdownToHtml";
|
||||
import path from "path";
|
||||
|
||||
export const markdownPlugin = {
|
||||
name: "markdown-plugin",
|
||||
enforce: "pre",
|
||||
transform(code, id) {
|
||||
if (id.endsWith(".md")) {
|
||||
const { data, content } = matter(code);
|
||||
const filename = path.basename(id, ".md");
|
||||
const html = markdownToHtml(filename, content);
|
||||
const htmlString = JSON.stringify({ html });
|
||||
return `export default ${htmlString};`;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import MarkdownIt from "markdown-it";
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
});
|
||||
|
||||
const mediaSrc = (folderName, fileName) => {
|
||||
return `/posts/${folderName}/${fileName}`;
|
||||
};
|
||||
|
||||
// Customize Markdown-to-HTML mapping here
|
||||
// md.renderer.rules.paragraph_open = () => '<p class="custom-paragraph">';
|
||||
md.renderer.rules.code_block = (tokens, idx, options, env, self) => {
|
||||
console.log("tokens", tokens);
|
||||
return `<code>${tokens[idx].content}</code>`;
|
||||
};
|
||||
md.renderer.rules.image = (tokens, idx, options, env, self) => {
|
||||
// console.log('env', env)
|
||||
const token = tokens[idx];
|
||||
const src = token.attrGet("src");
|
||||
const alt = token.content;
|
||||
const postName = env.postName;
|
||||
const formattedSrc = mediaSrc(postName, src);
|
||||
|
||||
if (src.endsWith(".mp4")) {
|
||||
return `<video controls>
|
||||
<source src="${formattedSrc}" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>`;
|
||||
}
|
||||
|
||||
return `<img src="${formattedSrc}" alt="${alt}" />`;
|
||||
};
|
||||
|
||||
export function markdownToHtml(postName, content) {
|
||||
return md.render(content, { postName: postName });
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { Plugin } from 'vite'
|
||||
import matter from 'gray-matter';
|
||||
import { markdownToHtml } from './markdownToHtml';
|
||||
import path from 'path';
|
||||
|
||||
export const markdownPlugin: Plugin = {
|
||||
name: 'markdown-plugin',
|
||||
enforce: 'pre',
|
||||
transform(code, id) {
|
||||
if (id.endsWith('.md')) {
|
||||
const { data, content } = matter(code);
|
||||
const filename = path.basename(id, '.md');
|
||||
const html = markdownToHtml(filename, content);
|
||||
const htmlString = JSON.stringify({ html });
|
||||
return `export default ${htmlString};`;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
import MarkdownIt from 'markdown-it';
|
||||
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
});
|
||||
|
||||
const mediaSrc = (folderName: string, fileName: string) => {
|
||||
return `/posts/${folderName}/${fileName}`
|
||||
}
|
||||
|
||||
// Customize Markdown-to-HTML mapping here
|
||||
// md.renderer.rules.paragraph_open = () => '<p class="custom-paragraph">';
|
||||
md.renderer.rules.code_block = (tokens, idx, options, env, self) => {
|
||||
console.log('tokens', tokens)
|
||||
return `<code>${tokens[idx].content}</code>`;
|
||||
}
|
||||
md.renderer.rules.image = (tokens, idx, options, env, self) => {
|
||||
// console.log('env', env)
|
||||
const token = tokens[idx];
|
||||
const src = token.attrGet('src');
|
||||
const alt = token.content
|
||||
const postName = env.postName
|
||||
const formattedSrc = mediaSrc(postName, src)
|
||||
|
||||
if (src.endsWith('.mp4')) {
|
||||
return `<video controls>
|
||||
<source src="${formattedSrc}" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>`;
|
||||
}
|
||||
|
||||
return `<img src="${formattedSrc}" alt="${alt}" />`;
|
||||
|
||||
};
|
||||
|
||||
export function markdownToHtml(postName: string, content: string): string {
|
||||
return md.render(content, { postName: postName });
|
||||
}
|
||||
|
|
@ -6,5 +6,5 @@
|
|||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts", "src/utils/*"]
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { markdownPlugin } from './src/utils/markdownPlugin';
|
||||
import { markdownPlugin } from './build/markdownPlugin';
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import wasm from "vite-plugin-wasm";
|
||||
|
|
|
|||
Loading…
Reference in New Issue