Creating a Vite plugin for markdown with HMR support

If you’re looking to add markdown support to your Vite project, you’re in luck! Vite makes it easy to create custom plugins to extend its functionality. In this article, we’ll walk through creating a Vite plugin that adds markdown support along with hot module replacement (HMR) capabilities.

Step 1: Create a new Vite plugin

To get started, create a new file in your project’s plugins directory. Let’s call it markdownPlugin.js. This file will contain the code for our custom plugin.

Step 2: Add markdown support

In the markdownPlugin.js file, we’ll need to import the markdown-it library and use it to parse markdown content. Here’s a simple example of how you can add markdown support to your Vite project:

        
            import MarkdownIt from 'markdown-it';

            // Create a new instance of markdown-it
            const md = new MarkdownIt();

            export default function markdownPlugin() {
                return {
                    name: 'markdown-plugin',
                    transform(code, id) {
                        // Check if the file is a markdown file
                        if (id.endsWith('.md')) {
                            // Parse the markdown content
                            const html = md.render(code);

                            // Return the transformed code
                            return {
                                code: `export default ${JSON.stringify(html)};`,
                                map: null
                            };
                        }
                    }
                };
            }
        
    

Step 3: Add HMR support

To enable hot module replacement for our plugin, we’ll need to add the necessary code to handle updates to the markdown content. Here’s how you can add HMR support to our markdown plugin:

        
            export default function markdownPlugin() {
                let markdownContent = '';

                return {
                    name: 'markdown-plugin',
                    transform(code, id) {
                        if (id.endsWith('.md')) {
                            markdownContent = code;

                            const html = md.render(code);

                            return {
                                code: `export default ${JSON.stringify(html)};`,
                                map: null
                            };
                        }
                    },
                    handleHotUpdate({ file, server }) {
                        if (file.endsWith('.md')) {
                            const updatedCode = server.moduleGraph.getModuleById(file).source;

                            markdownContent = updatedCode;

                            const html = md.render(updatedCode);

                            server.ws.send({
                                type: 'update',
                                updates: [
                                    { path: file, timestamp: Date.now() }
                                ]
                            });
                        }
                    }
                };
            }
        
    

Conclusion

By following these steps, you can create a custom Vite plugin that adds markdown support to your project along with HMR capabilities. This can be a great way to enhance your development workflow and make it easier to work with markdown content in Vite projects.