通过 remark
加载 Markdown。
只需将加载器添加到您的配置中,并传入选项。
import md from "markdown-file.md";
console.log(md);
webpack.config.js
import RemarkHTML from "remark-html";
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "html-loader",
},
{
loader: "remark-loader",
options: {
remarkOptions: {
plugins: [RemarkHTML],
},
},
},
],
},
],
},
};
这是 remark
插件的完整列表。
我们不再支持任何 react
特定功能。如果您对将 JSX 与 Markdown 混合使用感兴趣,请参阅出色的 MDX 项目。
Remark 选项
类型
type remarkOptions = {
plugins: Array<string | Array>;
settings: Object;
data: Object;
};
允许连接 remark
插件
类型
type plugins = Array<string | Array>;
默认值:[]
允许连接 remark
插件
webpack.config.js
import RemarkFrontmatter from "remark-frontmatter";
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
options: {
remarkOptions: {
plugins: [RemarkFrontmatter],
},
},
},
],
},
],
},
};
如果需要为插件指定选项,可以通过数组传递插件,其中第二个参数将是 options
。
webpack.config.js
import RemarkFrontmatter from "remark-frontmatter";
import RemarkBookmarks from "remark-bookmarks";
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
options: {
remarkOptions: {
plugins: [
RemarkFrontmatter,
[
RemarkBookmarks,
{
bookmarks: {
npm: "https://npmjs.net.cn/package/remark-bookmarks",
},
},
],
],
},
},
},
],
},
],
},
};
Remark 设置
类型
type settings = Object;
默认值:undefined
将 remark-stringify
选项和 remark-parse
选项传递给 remark
。
webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
options: {
remarkOptions: {
settings: {
bullet: "+",
listItemIndent: "1",
},
},
},
},
],
},
],
},
};
可供所有插件使用的信息
类型
type data = Object;
默认值:undefined
配置 remark
以使用所有插件可用的信息。此信息存储在内存中的键值存储中。
webpack.config.js
function examplePluginUsingData() {
console.log(this.data);
// { alpha: 'bravo', charlie: 'delta' }
}
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
options: {
remarkOptions: {
plugins: [examplePluginUsingData],
data: {
alpha: "bravo",
charlie: "delta",
},
},
},
},
],
},
],
},
};
移除 frontMatter
类型
type removeFrontMatter = boolean;
默认值:true
默认情况下,frontMatter 会被移除。要覆盖此行为,请将 removeFrontMatter
设置为 false
,并将 remark-frontmatter
添加到插件中。
webpack.config.js
import RemarkFrontmatter from "remark-frontmatter";
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
options: {
removeFrontMatter: false,
remarkOptions: {
plugins: [RemarkFrontmatter],
},
},
},
],
},
],
},
};
此项目受到以下开源工作的启发
要获取 HTML,您需要将 remark-html
添加到 remark 插件中,并将 html-loader
添加到您的 webpack.config.js
中。
import md from "markdown-file.md";
console.log(md);
webpack.config.js
import RemarkHTML from "remark-html";
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "html-loader",
},
{
loader: "remark-loader",
options: {
remarkOptions: {
plugins: [RemarkHTML],
},
},
},
],
},
],
},
};
index.js
import md from "markdown-file.md";
console.log(md);
webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.md$/,
use: [
{
loader: "remark-loader",
},
],
},
],
},
};
我们欢迎所有贡献!如果您是新用户,请在提交问题或拉取请求之前花一些时间阅读我们的贡献指南。