markdown-it-vanilla-loader

2019-10-10 admin

markdown-it-vanilla-loader是什么

什么是markdown-it-vanilla-loader,Load markdown files to html in webpack. Uses markdown-it and assumes nothing about your configuration.

markdown-it-vanilla-loader使用教程帮助文档

CircleCI branch Codecov branch npm npm

<div align=“center”>

Markdown-It-Vanilla-Loader

Uses markdown-it to render markdown to HTML and assumes nothing about your configuration.

</div>

Install

yarn add -D markdown-it-vanilla-loader

Usage

Input

# Your Markdown File

With some content.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          'html-loader',
          {
            loader: 'markdown-it-vanilla-loader',
            options: {
              highlight: (code, language) => {
                return language && highlightjs.getLanguage(language)
                  ? highlightjs.highlight(language, code).value
                  : code;
              }
            }
          }
        ]
      }
    ]
  }
};

Output

<h1>Your Markdown File</h1>

<p>With some content.</p>

Options

This loader accepts any options that are allowed on markdown-it, those options can be found here.

Name Type Default Description
plugins {array} [] Plugins to load into markdown-it

plugins

Plugins can be defined in 2 ways.

  1. Just a string with no options.
  2. An array where the first item is the plugin name and the second item is an object with options for that plugin.

webpack.config.js

{
  loader: 'markdown-it-vanilla-loader',
  options: {
    plugins: [
      // Just a string
      'markdown-it-anchor',
      // Array with options
      [
        'markdown-it-anchor',
        {
          permalink: true,
          permalinkSymbol: '',
          level: 2
        }
      ]
    ]
  }
}

Example

cd example
yarn
yarn build

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77042.html

文章标题:markdown-it-vanilla-loader

回到顶部