Skip to content

Commit c63d18e

Browse files
tianyong90tianyong90
committed
readme
1 parent 919bf09 commit c63d18e

File tree

4 files changed

+452
-11
lines changed

4 files changed

+452
-11
lines changed

‎README-CN.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ module: {
112112
// other options
113113
```
114114
115-
2. 将 `.md` 文件作为 vue 单文件组件导入
115+
2. 将 `.md` 文件 html 字符串导入
116116
117117
```js
118118
import Hello from 'hello.md'
@@ -126,7 +126,7 @@ console.log(Hello)
126126
127127
### 单独使用
128128
129-
vue-markdown-loader 也可以解析 markdown 文件，并返回一个包含 html 字符串供 html-loader 加载。
129+
vue-markdown-loader 也可以解析 markdown 文件，并返回一个包含 html 和 front matter 数据的对象。
130130
131131
1. 配置
132132

‎README.md

Lines changed: 102 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
[简体中文](./README-CN.md)
44

5-
This is a webpack loader that convert `.md` file to vue sfc(which can be loaded via vue-loader).
5+
This is a webpack laoder that can load markdown file. With proper configuration, the loader can convert markdown file content into `vue sfc` component object or into html string, so it can be chained with vue-loader or html-loader.
66

77
The project is inspired by [vuepress](https://github.com/vuejs/vuepress), we reused most of its source code and made some improvements to allow it being used in non-vuepress project.
88

9-
If you like Vuepress, please visit [vuepress](https://github.com/vuejs/vuepress) and star it. :smile:
9+
If you are interested in Vuepress, please visit [vuepress](https://github.com/vuejs/vuepress) and star it. :smile:
1010

1111
![screenshot](./images/screenshot.png)
1212

@@ -18,9 +18,13 @@ npm i @tianyong90/vue-markdown-loader -S
1818

1919
## Useage
2020

21-
1. configure
21+
### sue along with vue-loader
2222

23-
add loader rules for `.md` files in webpack.config.js
23+
Generally, it is recommended to be used with `vue-loader`
24+
25+
1. configuration
26+
27+
add rule for .md file in webpack.config.js
2428

2529
```js
2630
module: {
@@ -43,10 +47,9 @@ module: {
4347
{
4448
loader: '@tianyong90/vue-markdown-loader',
4549
options: {
46-
// sourceDir: ''
4750
contentCssClass: 'markdown-body',
4851
markdown: {
49-
lineNumbers: true, // enable line numbers
52+
lineNumbers: true, // enable linenumber
5053
}
5154
}
5255
}
@@ -57,9 +60,9 @@ module: {
5760
// other options
5861
```
5962

60-
2. import md file as vue single file component
63+
2. load `.md` as a vue sfc object
6164

62-
```vue
65+
```html
6366
<template>
6467
<Hello />
6568
</template>
@@ -73,10 +76,100 @@ export default {
7376
</script>
7477

7578
<style>
76-
// add styles for rendered markdown elements
79+
// add styles for parsed html element
7780
</style>
7881
```
7982
83+
### along with html-loader
84+
85+
`vue-markdown-loader` can parse markdown and return html string which can be loaded by `html-loader`
86+
87+
1. configuration
88+
89+
add rule for .md file in webpack.config.js
90+
91+
```js
92+
module: {
93+
rules: [
94+
{
95+
test: /\.vue$/,
96+
loader: 'vue-loader'
97+
},
98+
{
99+
test: /\.md$/,
100+
use: [
101+
{
102+
loader: 'html-loader',
103+
},
104+
{
105+
`loader: '@tianyong90/`vue-markdown-loader',
106+
options: {
107+
mode: 'html', // IMPORTANT
108+
}
109+
}
110+
]
111+
}
112+
]
113+
},
114+
// other options
115+
```
116+
117+
2. load `.md` as html string
118+
119+
```js
120+
import Hello from 'hello.md'
121+
122+
console.log(Hello)
123+
```
124+
125+
Hello:
126+
127+
![加载后的 html](./images/md-html-string.png)
128+
129+
### use it alone
130+
131+
`vue-markdown-loader` can parse markdown file and return an object whick contains hteml and frontmattter data of the file.
132+
133+
1. configuration
134+
135+
add rule for .md file in webpack.config.js
136+
137+
```js
138+
module: {
139+
rules: [
140+
{
141+
test: /\.vue$/,
142+
loader: 'vue-loader'
143+
},
144+
{
145+
test: /\.md$/,
146+
use: [
147+
{
148+
loader: '@tianyong90/vue-markdown-loader',
149+
options: {
150+
mode: 'raw', // IMPORTANT
151+
contentCssClass: 'markdown-body',
152+
}
153+
}
154+
]
155+
}
156+
]
157+
},
158+
// other options
159+
```
160+
161+
2. load `.md` file as an object
162+
163+
```js
164+
import Hello from 'hello.md'
165+
166+
console.log(Hello)
167+
```
168+
169+
the variable `Html` contains 2 property, `attributes`(frontmatter data) and `html`(html content), looks lick below:
170+
171+
![加载后的对象](./images/md-raw-object.png)
172+
80173
## License
81174
82175
MIT

‎packages/vue-markdown-loader/README-CN.md

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
# vue-markdown-loader
2+
3+
[ENGLISH](./README.md)
4+
5+
这是一个用于加载 markdown 文件的 Webpack loader。通过配置，可以将 markdown 文件内容转换为一 vue sfc 组件对象或者 html 内容，此外还可以直接转换为一个包含解析结果、frontmatter 等数据的对象。因此，它可以很方便的与 vue-loader 或者 html-loader 配合使用，也可以单独使用。
6+
7+
项目的代码大部分提取自 [vuepress](https://github.com/vuejs/vuepress) 项目，但进行了一系列修改、修正以及优化，使它能在非 vuepress 项目中使用。在此对这一官方包的开发者们表示感谢。如果你有兴趣，可以前往该项目查看源码并 star。
8+
9+
![screenshot](./images/screenshot.png)
10+
11+
## 安装
12+
13+
```bash
14+
npm i @tianyong90/vue-markdown-loader -S
15+
```
16+
17+
## 使用
18+
19+
### 与 vue-loader 一起使用
20+
21+
一般情况下，推荐与 vue-loader 一起使用。
22+
23+
1. 配置
24+
25+
在 webpack.config.js 中为 .md 文件添加加载规则
26+
27+
```js
28+
module: {
29+
rules: [
30+
{
31+
test: /\.vue$/,
32+
loader: 'vue-loader'
33+
},
34+
{
35+
test: /\.md$/,
36+
use: [
37+
{
38+
loader: 'vue-loader',
39+
options: {
40+
compilerOptions: {
41+
preserveWhiteSpace: false
42+
}
43+
}
44+
},
45+
{
46+
loader: '@tianyong90/vue-markdown-loader',
47+
options: {
48+
contentCssClass: 'markdown-body',
49+
markdown: {
50+
lineNumbers: true, // 启用行号
51+
}
52+
}
53+
}
54+
]
55+
}
56+
]
57+
},
58+
// other options
59+
```
60+
61+
2. 将 `.md` 文件作为 vue 单文件组件导入
62+
63+
```html
64+
<template>
65+
<Hello />
66+
</template>
67+
68+
<script scoped>
69+
import Hello from 'hello.md'
70+
71+
export default {
72+
components: { Hello }
73+
}
74+
</script>
75+
76+
<style>
77+
// 为解析出来的 markdown 元素添加样式
78+
</style>
79+
```
80+
81+
### 与 html-loader 一起使用
82+
83+
vue-markdown-loader 也可以解析 markdown 文件，并返回一个包含 html 字符串供 html-loader 加载。
84+
85+
1. 配置
86+
87+
在 webpack.config.js 中为 .md 文件添加加载规则
88+
89+
```js
90+
module: {
91+
rules: [
92+
{
93+
test: /\.vue$/,
94+
loader: 'vue-loader'
95+
},
96+
{
97+
test: /\.md$/,
98+
use: [
99+
{
100+
loader: 'html-loader',
101+
},
102+
{
103+
loader: '@tianyong90/vue-markdown-loader',
104+
options: {
105+
mode: 'html', // 重要
106+
}
107+
}
108+
]
109+
}
110+
]
111+
},
112+
// other options
113+
```
114+
115+
2. 将 `.md` 文件 html 字符串导入
116+
117+
```js
118+
import Hello from 'hello.md'
119+
120+
console.log(Hello)
121+
```
122+
123+
加载的 Hello 结果如下：
124+
125+
![加载后的 html](./images/md-html-string.png)
126+
127+
### 单独使用
128+
129+
vue-markdown-loader 也可以解析 markdown 文件，并返回一个包含 html 和 front matter 数据的对象。
130+
131+
1. 配置
132+
133+
在 webpack.config.js 中为 .md 文件添加加载规则
134+
135+
```js
136+
module: {
137+
rules: [
138+
{
139+
test: /\.vue$/,
140+
loader: 'vue-loader'
141+
},
142+
{
143+
test: /\.md$/,
144+
use: [
145+
{
146+
loader: '@tianyong90/vue-markdown-loader',
147+
options: {
148+
mode: 'raw', // 重要
149+
contentCssClass: 'markdown-body',
150+
}
151+
}
152+
]
153+
}
154+
]
155+
},
156+
// other options
157+
```
158+
159+
2. 将 `.md` 文件作为一个对象导入
160+
161+
```js
162+
import Hello from 'hello.md'
163+
164+
console.log(Hello)
165+
```
166+
167+
加载后的对象包含 attributes(frontmatter 数据)和 html(解析后的 html 内容)，如下图：
168+
169+
![加载后的对象](./images/md-raw-object.png)
170+
171+
## License
172+
173+
MIT

0 commit comments

Comments
 (0)