├── .gitignore
├── README.md
├── example
├── index.html
├── src
│ ├── app.vue
│ ├── custom.css
│ ├── entry.js
│ └── markdown.md
└── webpack.config.js
├── index.js
├── lib
├── core.js
└── markdown-compiler.js
├── package-lock.json
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .cache
3 | .DS_Store
4 | .idea
5 | build
6 | dist
7 | node_modules
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | You have other better choices
2 |
3 | - https://github.com/egoist/vmark
4 | - https://github.com/liril-net/ware-loader
5 | - https://github.com/wxsms/vue-md-loader
6 |
7 | ---------
8 |
9 | # vue-markdown-loader
10 |
11 | [](https://www.npmjs.com/package/vue-markdown-loader)
12 | 
13 |
14 | > Convert Markdown file to Vue Component using markdown-it.
15 |
16 | ## Example
17 |
18 | - https://github.com/mint-ui/docs
19 | - https://github.com/elemefe/element
20 |
21 | ## Live demo
22 |
23 | https://glitch.com/edit/#!/vue-markdown
24 |
25 | ## Installation
26 |
27 | ```bash
28 | # For Vue1
29 | npm i vue-markdown-loader@0 -D
30 |
31 | # For Vue2
32 | npm i vue-markdown-loader -D
33 | npm i vue-loader vue-template-compiler -D
34 | ```
35 |
36 | ## Feature
37 |
38 | - Hot reload
39 | - Write vue script
40 | - Code highlight
41 |
42 | ## Usage
43 |
44 | [Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
45 |
46 | `webpack.config.js` file:
47 |
48 | ```javascript
49 | module.exports = {
50 | module: {
51 | rules: [
52 | {
53 | test: /\.md$/,
54 | loader: 'vue-markdown-loader'
55 | }
56 | ]
57 | }
58 | };
59 | ```
60 |
61 | ### With `vue-loader 15`
62 |
63 | ```js
64 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
65 |
66 | module.exports = {
67 | module: {
68 | rules: [
69 | {
70 | test: /\.vue$/,
71 | loader: 'vue-loader'
72 | },
73 | {
74 | test: /\.md$/,
75 | use: [
76 | {
77 | loader: 'vue-loader'
78 | },
79 | {
80 | loader: 'vue-markdown-loader/lib/markdown-compiler',
81 | options: {
82 | raw: true
83 | }
84 | }
85 | ]
86 | }
87 | ]
88 | },
89 | plugins: [new VueLoaderPlugin()]
90 | };
91 | ```
92 |
93 | ### With Vue CLI 3
94 |
95 | In your `vue.config.js` file:
96 |
97 | ```js
98 | module.exports = {
99 | chainWebpack: config => {
100 | config.module.rule('md')
101 | .test(/\.md/)
102 | .use('vue-loader')
103 | .loader('vue-loader')
104 | .end()
105 | .use('vue-markdown-loader')
106 | .loader('vue-markdown-loader/lib/markdown-compiler')
107 | .options({
108 | raw: true
109 | })
110 | }
111 | }
112 | ```
113 |
114 | ## Options
115 |
116 | ### `preventExtract`
117 |
118 | Since `v2.0.0`, this loader will automatically extract script and style tags from html token content (#26). If you do not need, you can set this option
119 |
120 | ```js
121 | {
122 | test: /\.md$/,
123 | loader: 'vue-markdown-loader',
124 | options: {
125 | preventExtract: true
126 | }
127 | }
128 | ```
129 |
130 | ### `wrapper`
131 |
132 | You can customize wrapper tag no matter html element tag or vue component tag. Default is 'section'
133 |
134 | ```js
135 | {
136 | test: /\.md$/,
137 | loader: 'vue-markdown-loader',
138 | options: {
139 | wrapper: 'article',
140 | }
141 | }
142 | ```
143 |
144 | ### `markdownIt`
145 |
146 | reference [markdown-it](https://github.com/markdown-it/markdown-it#init-with-presets-and-options)
147 |
148 | ```javascript
149 | {
150 | module: {
151 | rules: [
152 | {
153 | test: /\.md$/,
154 | loader: 'vue-markdown-loader',
155 | options: {
156 | // markdown-it config
157 | preset: 'default',
158 | breaks: true,
159 | preprocess: function(markdownIt, source) {
160 | // do any thing
161 | return source;
162 | },
163 | use: [
164 | /* markdown-it plugin */
165 | require('markdown-it-xxx'),
166 | /* or */
167 | [require('markdown-it-xxx'), 'this is options']
168 | ]
169 | }
170 | }
171 | ];
172 | }
173 | }
174 | ```
175 |
176 | Or you can customize `markdown-it`
177 |
178 | ```javascript
179 | var markdown = require('markdown-it')({
180 | html: true,
181 | breaks: true
182 | })
183 |
184 | markdown
185 | .use(plugin1)
186 | .use(plugin2, opts, ...)
187 | .use(plugin3);
188 |
189 | module.exports = {
190 | module: {
191 | rules: [
192 | {
193 | test: /\.md$/,
194 | loader: 'vue-markdown-loader',
195 | options: markdown
196 | }
197 | ]
198 | }
199 | };
200 | ```
201 |
202 | ### Add Vue configuration
203 |
204 | ```js
205 | var webpack = require('webpack');
206 |
207 | module.exports = {
208 | module: {
209 | rules: [
210 | {
211 | test: /\.md$/,
212 | loader: 'vue-markdown-loader'
213 | }
214 | ]
215 | },
216 |
217 | plugins: [
218 | new webpack.LoaderOptionsPlugin({
219 | vue: {}
220 | })
221 | ]
222 | };
223 | ```
224 |
225 | ## License
226 |
227 | WTFPL
228 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Demo
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/example/src/app.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
18 |
--------------------------------------------------------------------------------
/example/src/custom.css:
--------------------------------------------------------------------------------
1 | .custom {
2 | color: green;
3 | font-size: 20px;
4 | }
--------------------------------------------------------------------------------
/example/src/entry.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './app.vue'
3 |
4 | new Vue({
5 | el: '#app',
6 | render: h => h(App)
7 | })
8 |
--------------------------------------------------------------------------------
/example/src/markdown.md:
--------------------------------------------------------------------------------
1 |
2 | # Hello
3 |
4 | `{{sss}}`
5 |
6 | > This is test.
7 |
8 | - How are you?
9 | - Fine, Thank you, and you?
10 | - I'm fine， too. Thank you.
11 | - 🌚
12 |
13 | ```javascript
14 | import Vue from 'vue'
15 |
16 | Vue.config.debug = true
17 | ```
18 |
19 |
20 | {{ model }} test
21 |
22 |
23 | {{ model }}
24 |
25 |
28 | 啊哈哈哈
29 |
30 |
31 | > All script or style tags in html mark will be extracted.Script will be excuted, and style will be added to document head.
32 | > Notice if there is a string instance which contains special word "</script>", it will fetch a SyntaxError.
33 | > Due to the complexity to solve it, just don't do that.
34 | ```html
35 |
40 |
41 |
46 |
70 | jjjjjjjjjjjjjjjjjjjjjj
71 |
72 |
73 |
74 | ```
75 |
76 |
77 |
78 |
79 |
80 |
81 | sadfsfs
82 |
83 | 大家哦哦好啊谁都发生地方上的冯绍峰s
84 |
85 | > sahhhh
86 |
87 | {{ model }}
88 |
89 | ```html
90 | {{model }}{{model }}{{model }}{{model }}{{ model }}
91 | ```
92 |
93 |
94 |
95 |
96 |
97 | ## 引入 style 文件
98 |
99 |
100 | 原谅色
101 |
102 |
--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
1 | var resolve = require("path").resolve;
2 | var webpack = require("webpack");
3 |
4 | module.exports = {
5 | entry: "./src/entry.js",
6 | output: {
7 | path: resolve(__dirname, "./dist"),
8 | publicPath: "/dist/",
9 | filename: "build.js"
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.vue$/,
15 | loader: "vue-loader"
16 | },
17 | {
18 | test: /\.js$/,
19 | loader: "babel-loader",
20 | exclude: /node_modules/,
21 | options: {
22 | presets: ["es2015"]
23 | }
24 | },
25 | {
26 | test: /\.css$/,
27 | use: ["style-loader", "css-loader"]
28 | },
29 | {
30 | test: /\.md$/,
31 | loader: resolve(__dirname, "../index.js"),
32 | options: {}
33 | }
34 | ]
35 | },
36 | devServer: {
37 | historyApiFallback: true,
38 | noInfo: true
39 | }
40 | };
41 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/core');
2 |
--------------------------------------------------------------------------------
/lib/core.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var loaderUtils = require('loader-utils');
3 |
4 | var markdownCompilerPath = path.resolve(__dirname, 'markdown-compiler.js');
5 |
6 | module.exports = function(source) {
7 | this.cacheable();
8 |
9 | var options = loaderUtils.getOptions(this) || {};
10 | Object.defineProperty(this._compilation, '__vueMarkdownOptions__', {
11 | value: options,
12 | enumerable: false,
13 | configurable: true
14 | })
15 |
16 | var filePath = this.resourcePath;
17 |
18 | var result =
19 | 'module.exports = require(' +
20 | loaderUtils.stringifyRequest(
21 | this,
22 | '!!vue-loader!' +
23 | markdownCompilerPath +
24 | '?raw!' +
25 | filePath +
26 | (this.resourceQuery || '')
27 | ) +
28 | ');';
29 |
30 | return result;
31 | };
32 |
--------------------------------------------------------------------------------
/lib/markdown-compiler.js:
--------------------------------------------------------------------------------
1 | var loaderUtils = require('loader-utils');
2 | var hljs = require('highlight.js');
3 | var cheerio = require('cheerio');
4 | var markdown = require('markdown-it');
5 | var Token = require('markdown-it/lib/token');
6 |
7 | /**
8 | * `` => ``
9 | * `