Skip to content

Commit 6471d4f

Browse files
yyx990803yyx990803
committed
handle codeblocks
1 parent 79b9939 commit 6471d4f

File tree

8 files changed

+189
-144
lines changed

8 files changed

+189
-144
lines changed

Diff for: ‎docs/index.md

+23
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,26 @@
33
> Minimalistic docs generator with Vue component based layout system
44
55
[Testing link](./layout.md)
6+
7+
``` html
8+
<div id="example">
9+
<p>Original message: "{{ message }}"</p>
10+
<p>Computed reversed message: "{{ reversedMessage }}"</p>
11+
</div>
12+
13+
<script>
14+
var vm = new Vue({
15+
el: '#example',
16+
data: {
17+
message: 'Hello'
18+
},
19+
computed: {
20+
// a computed getter
21+
reversedMessage: function () {
22+
// `this` points to the vm instance
23+
return this.message.split('').reverse().join('')
24+
}
25+
}
26+
})
27+
</script>
28+
```

Diff for: ‎lib/default-theme/Layout.vue

+2-80
Original file line numberDiff line numberDiff line change
@@ -32,83 +32,5 @@ export default {
3232
}
3333
</script>
3434

35-
<style>
36-
/*
37-
Copied from nprogress since it doens't
38-
allow programmatic configuration of color
39-
*/
40-
41-
/* Make clicks pass-through */
42-
#nprogress {
43-
pointer-events: none;
44-
}
45-
46-
#nprogress .bar {
47-
background: #41b883;
48-
49-
position: fixed;
50-
z-index: 1031;
51-
top: 0;
52-
left: 0;
53-
54-
width: 100%;
55-
height: 2px;
56-
}
57-
58-
/* Fancy blur effect */
59-
#nprogress .peg {
60-
display: block;
61-
position: absolute;
62-
right: 0px;
63-
width: 100px;
64-
height: 100%;
65-
box-shadow: 0 0 10px #41b883, 0 0 5px #41b883;
66-
opacity: 1.0;
67-
68-
-webkit-transform: rotate(3deg) translate(0px, -4px);
69-
-ms-transform: rotate(3deg) translate(0px, -4px);
70-
transform: rotate(3deg) translate(0px, -4px);
71-
}
72-
73-
/* Remove these to get rid of the spinner */
74-
#nprogress .spinner {
75-
display: block;
76-
position: fixed;
77-
z-index: 1031;
78-
top: 15px;
79-
right: 15px;
80-
}
81-
82-
#nprogress .spinner-icon {
83-
width: 18px;
84-
height: 18px;
85-
box-sizing: border-box;
86-
87-
border: solid 2px transparent;
88-
border-top-color: #41b883;
89-
border-left-color: #41b883;
90-
border-radius: 50%;
91-
92-
-webkit-animation: nprogress-spinner 400ms linear infinite;
93-
animation: nprogress-spinner 400ms linear infinite;
94-
}
95-
96-
.nprogress-custom-parent {
97-
overflow: hidden;
98-
position: relative;
99-
}
100-
101-
.nprogress-custom-parent #nprogress .spinner,
102-
.nprogress-custom-parent #nprogress .bar {
103-
position: absolute;
104-
}
105-
106-
@-webkit-keyframes nprogress-spinner {
107-
0% { -webkit-transform: rotate(0deg); }
108-
100% { -webkit-transform: rotate(360deg); }
109-
}
110-
@keyframes nprogress-spinner {
111-
0% { transform: rotate(0deg); }
112-
100% { transform: rotate(360deg); }
113-
}
114-
</style>
35+
<style src="prismjs/themes/prism-tomorrow.css"></style>
36+
<style src="./nprogress.css"></style>

Diff for: ‎lib/default-theme/nprogress.css

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/*
2+
Copied from nprogress since it doens't
3+
allow programmatic configuration of color
4+
*/
5+
6+
/* Make clicks pass-through */
7+
#nprogress {
8+
pointer-events: none;
9+
}
10+
11+
#nprogress .bar {
12+
background: #41b883;
13+
14+
position: fixed;
15+
z-index: 1031;
16+
top: 0;
17+
left: 0;
18+
19+
width: 100%;
20+
height: 2px;
21+
}
22+
23+
/* Fancy blur effect */
24+
#nprogress .peg {
25+
display: block;
26+
position: absolute;
27+
right: 0px;
28+
width: 100px;
29+
height: 100%;
30+
box-shadow: 0 0 10px #41b883, 0 0 5px #41b883;
31+
opacity: 1.0;
32+
33+
-webkit-transform: rotate(3deg) translate(0px, -4px);
34+
-ms-transform: rotate(3deg) translate(0px, -4px);
35+
transform: rotate(3deg) translate(0px, -4px);
36+
}
37+
38+
/* Remove these to get rid of the spinner */
39+
#nprogress .spinner {
40+
display: block;
41+
position: fixed;
42+
z-index: 1031;
43+
top: 15px;
44+
right: 15px;
45+
}
46+
47+
#nprogress .spinner-icon {
48+
width: 18px;
49+
height: 18px;
50+
box-sizing: border-box;
51+
52+
border: solid 2px transparent;
53+
border-top-color: #41b883;
54+
border-left-color: #41b883;
55+
border-radius: 50%;
56+
57+
-webkit-animation: nprogress-spinner 400ms linear infinite;
58+
animation: nprogress-spinner 400ms linear infinite;
59+
}
60+
61+
.nprogress-custom-parent {
62+
overflow: hidden;
63+
position: relative;
64+
}
65+
66+
.nprogress-custom-parent #nprogress .spinner,
67+
.nprogress-custom-parent #nprogress .bar {
68+
position: absolute;
69+
}
70+
71+
@-webkit-keyframes nprogress-spinner {
72+
0% { -webkit-transform: rotate(0deg); }
73+
100% { -webkit-transform: rotate(360deg); }
74+
}
75+
@keyframes nprogress-spinner {
76+
0% { transform: rotate(0deg); }
77+
100% { transform: rotate(360deg); }
78+
}

Diff for: ‎lib/dev.js

+3
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ module.exports = async function dev (sourceDir) {
4949
chalk.cyan(`http://localhost:${port}`)
5050
}\n`
5151
)
52+
} else {
53+
const time = new Date().toTimeString().match(/^[\d:]+/)[0]
54+
console.log(` ${chalk.gray(`[${time}]`)} ${chalk.green('✔')} successfully compiled.`)
5255
}
5356
})
5457

Diff for: ‎lib/webpack/baseConfig.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ module.exports = function createBaseConfig ({
6969
}
7070
})
7171
.end()
72-
.use('markdown-to-vue-loader')
73-
.loader('markdown-to-vue-loader')
72+
.use('markdown-loader')
73+
.loader(require.resolve('./markdownLoader'))
7474

7575
config.module
7676
.rule('images')

Diff for: ‎lib/webpack/markdownLoader.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const prism = require('prismjs')
2+
const frontmatter = require('yaml-front-matter')
3+
const loadLanguages = require('prismjs/components/index')
4+
5+
const md = require('markdown-it')({
6+
html: true,
7+
typographer: true,
8+
highlight: (str, lang) => {
9+
if (lang === 'vue') {
10+
lang = 'html'
11+
}
12+
if (!prism.languages[lang]) {
13+
try {
14+
loadLanguages([lang])
15+
} catch (e) {
16+
throw new Error(`[vuepress] Syntax highlight for language "${lang}" is not supported.`)
17+
return ''
18+
}
19+
}
20+
if (prism.languages[lang]) {
21+
let res = prism.highlight(str, prism.languages[lang], lang)
22+
return `<pre class="language-${lang}"><code v-pre>${res}</code></pre>`
23+
}
24+
return ''
25+
}
26+
})
27+
28+
// TODO containers (warning, tip, etc.)
29+
// TODO translate links to router-link & translate md links to html
30+
// TODO support using code blocks as demo
31+
32+
module.exports = function (src) {
33+
const content = frontmatter.loadFront(src).__content
34+
const html = md.render(content)
35+
return `<template><div class="markdown">${html}</div></template>`
36+
}

Diff for: ‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,12 @@
3838
"html-webpack-plugin": "^3.2.0",
3939
"koa-connect": "^2.0.1",
4040
"markdown-it": "^8.4.1",
41-
"markdown-to-vue-loader": "^0.4.0",
41+
"markdown-it-container": "^2.0.0",
4242
"mini-css-extract-plugin": "^0.4.0",
4343
"mkdirp": "^0.5.1",
4444
"nprogress": "^0.2.0",
4545
"postcss-loader": "^2.1.3",
46+
"prismjs": "^1.13.0",
4647
"rimraf": "^2.6.2",
4748
"url-loader": "^1.0.1",
4849
"vue": "^2.5.16",

0 commit comments

Comments
 (0)