Skip to content

Commit 4055147

Browse files
author
tangjinzhou
committed
init
0 parents  commit 4055147

13 files changed

+7641
-0
lines changed

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
*.log
2+
.cache
3+
.DS_Store
4+
.idea
5+
build
6+
dist
7+
node_modules

‎README.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# vue-antd-md-loader
2+
3+
md-loader based on [vue-markdown-loader](https://github.com/QingWei-Li/vue-markdown-loader)
4+
5+
> Convert Markdown file to Vue Component using markdown-it.
6+
7+
## Example
8+
9+
[ant-design-vue](https://github.com/vueComponent/ant-design)
10+
11+
## Installation
12+
13+
```bash
14+
# For Vue2
15+
npm i vue-antd-md-loader -D
16+
```
17+
18+
## Feature
19+
- Hot reload
20+
- Write vue script
21+
- Code highlight
22+
23+
24+
## Usage
25+
[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)
26+
27+
`webpack.config.js` file:
28+
29+
```javascript
30+
module.exports = {
31+
module: {
32+
rules: [
33+
{
34+
test: /\.md$/,
35+
loader: 'vue-antd-md-loader'
36+
}
37+
]
38+
}
39+
};
40+
```
41+
42+
## License
43+
WTFPL
44+

‎example/index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Demo</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="dist/build.js"></script>
10+
</body>
11+
</html>

‎example/src/app.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="markdown-body">
3+
<markdown></markdown>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import markdown from './markdown.md'
9+
import 'highlight.js/styles/github.css'
10+
import 'github-markdown-css'
11+
12+
export default {
13+
components: {
14+
markdown
15+
}
16+
}
17+
</script>
18+
<style>
19+
.markdown-body {
20+
box-sizing: border-box;
21+
min-width: 200px;
22+
max-width: 980px;
23+
margin: 0 auto;
24+
padding: 45px;
25+
}
26+
</style>

‎example/src/custom.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.custom {
2+
color: green;
3+
font-size: 20px;
4+
}

‎example/src/entry.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import App from './app.vue'
3+
4+
new Vue({
5+
el: '#app',
6+
render: h => h(App)
7+
})

‎example/src/markdown.md

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
# Hello
3+
4+
`<span>{{sss}}</span>`
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+
<div class="test">
20+
{{ model }} test
21+
</div>
22+
23+
<compo>{{ model }}</compo>
24+
25+
<div
26+
class="abc"
27+
@click="show = false">
28+
啊哈哈哈
29+
</div>
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 "&lt;/script>", it will fetch a SyntaxError.
33+
> Due to the complexity to solve it, just don't do that.
34+
```html
35+
<style scoped>
36+
.test {
37+
background-color: green;
38+
}
39+
</style>
40+
41+
<style scoped>
42+
.abc {
43+
background-color: yellow;
44+
}
45+
</style>
46+
<script>
47+
let a=1<2;
48+
let b="<-forget it-/script>";
49+
console.log("***This script tag is successfully extracted and excuted.***")
50+
module.exports = {
51+
components: {
52+
compo: {
53+
render(h) {
54+
return h('div', {
55+
style: {
56+
background: 'red'
57+
}
58+
}, this.$slots.default);
59+
}
60+
}
61+
},
62+
63+
data () {
64+
return {
65+
model: 'abc'
66+
}
67+
}
68+
}
69+
</script>
70+
jjjjjjjjjjjjjjjjjjjjjj
71+
<template>
72+
<div></div>
73+
</template>
74+
```
75+
76+
77+
78+
<div>
79+
</div>
80+
81+
sadfsfs
82+
83+
大家哦哦好啊谁都发生地方上的冯绍峰s
84+
85+
> sahhhh
86+
87+
<compo>{{ model }}</compo>
88+
89+
```html
90+
<compo>{{model }}{{model }}{{model }}{{model }}{{ model }}</compo>
91+
```
92+
93+
94+
95+
<style src="./custom.css"></style>
96+
97+
## 引入 style 文件
98+
99+
<div class="custom">
100+
原谅色
101+
</div>

‎example/webpack.config.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
};

‎index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./lib/core');

‎lib/core.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
this.options.__vueMarkdownOptions__ =
10+
this.query || this.vueMarkdown || this.options.vueMarkdown || {};
11+
12+
var filePath = this.resourcePath;
13+
14+
var result =
15+
'module.exports = require(' +
16+
loaderUtils.stringifyRequest(
17+
this,
18+
'!!vue-loader!' +
19+
markdownCompilerPath +
20+
'?raw!' +
21+
filePath +
22+
(this.resourceQuery || '')
23+
) +
24+
');';
25+
26+
return result;
27+
};

0 commit comments

Comments
 (0)