自定义markdown-loader

webpack

markdown-loader

想要创建自己的makdown-loader

首先创建markdown文件

# 前端学习总结

## 一、深入学习HTML+CSS

* HTML常见特性

## 二、深入学习javascript

创建my-md-loader.js

我们需要先将markdown的语法转化成html标签语法
使用marked
pnpm add marked

loader返回的要求是模块化的内容 所以需要进行如下操作

const { marked } = require("marked");

module.exports = function (content) {
	//将md文档装欢为html元素结构
	const htmlContent = marked(content);
	console.log(htmlContent);
	//返回结果必须是模块化的内容
	const innerContent = "`" + htmlContent + "`";
	const moduleContent = `var code = ${innerContent}; export default code`;
	return moduleContent;
};

为了方便浏览 我们可以下载 html-webpack-plugin 插件
pnpm add html-webpack-plugin

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	mode: "development",
	entry: "./src/main.js",
	output: {
		path: path.resolve(__dirname, "./build"),
		filename: "bundle.js",
	},
	module: {
		rules: [
			{
				test: /\.md$/,
				use: {
					loader: "./m-loader/my-md-loader",
				},
			},
		],
	},
	plugins: [new HtmlWebpackPlugin()],
};

打包后 浏览器打开的效果

如果想要高亮code
需要配合highlight.js
pnpm add highlight.js

const { marked } = require("marked");
const hljs = require("highlight.js");

module.exports = function (content) {
	//让marked解析语法时将代码的高亮内容标识出来
	marked.setOptions({
		highlight: function (code, lang) {
			return hljs.highlight(lang, code).value;
		},
	});
	//将md文档装欢为html元素结构
	const htmlContent = marked(content);
	console.log(htmlContent);
	//返回结果必须是模块化的内容
	const innerContent = "`" + htmlContent + "`";
	const moduleContent = `var code = ${innerContent}; export default code`;
	return moduleContent;
};