Skip to content

Commit 5c7fbef

Browse files
author
febobo
committedJul 28, 2020
add code preview
1 parent 63c55a8 commit 5c7fbef

File tree

3 files changed

+84
-87
lines changed

3 files changed

+84
-87
lines changed
 

‎docs/.vuepress/components/Run.vue

+81-85
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<template lang="html">
22
<div>
3-
43
<div class="example">
54
<div class="codemirror">
65
<codemirror ref="cmEditor" v-model="code" :options="cmOption" />
76
</div>
8-
<div class="title">
7+
<div class="run">
98
@Vue3js.cn
109
<button @click="run">运行一下</button>
1110
</div>
@@ -18,42 +17,42 @@
1817
</template>
1918

2019
<script>
21-
import dedent from "dedent";
22-
import { codemirror } from "vue-codemirror";
23-
// base style
24-
import "codemirror/lib/codemirror.css";
25-
// theme css
26-
import "codemirror/theme/base16-dark.css";
27-
// language
28-
import "codemirror/mode/vue/vue.js";
29-
// active-line.js
30-
import "codemirror/addon/selection/active-line.js";
31-
// styleSelectedText
32-
import "codemirror/addon/selection/mark-selection.js";
33-
import "codemirror/addon/search/searchcursor.js";
34-
// highlightSelectionMatches
35-
import "codemirror/addon/scroll/annotatescrollbar.js";
36-
import "codemirror/addon/search/matchesonscrollbar.js";
37-
import "codemirror/addon/search/searchcursor.js";
38-
import "codemirror/addon/search/match-highlighter.js";
39-
// keyMap
40-
import "codemirror/mode/clike/clike.js";
41-
import "codemirror/addon/edit/matchbrackets.js";
42-
import "codemirror/addon/comment/comment.js";
43-
import "codemirror/addon/dialog/dialog.js";
44-
import "codemirror/addon/dialog/dialog.css";
45-
import "codemirror/addon/search/searchcursor.js";
46-
import "codemirror/addon/search/search.js";
47-
import "codemirror/keymap/sublime.js";
48-
// foldGutter
49-
import "codemirror/addon/fold/foldgutter.css";
50-
import "codemirror/addon/fold/brace-fold.js";
51-
import "codemirror/addon/fold/comment-fold.js";
52-
import "codemirror/addon/fold/foldcode.js";
53-
import "codemirror/addon/fold/foldgutter.js";
54-
import "codemirror/addon/fold/indent-fold.js";
55-
import "codemirror/addon/fold/markdown-fold.js";
56-
import "codemirror/addon/fold/xml-fold.js";
20+
import dedent from 'dedent'
21+
import { codemirror } from 'vue-codemirror'
22+
// base style
23+
import 'codemirror/lib/codemirror.css'
24+
// theme css
25+
import 'codemirror/theme/base16-dark.css'
26+
// language
27+
import 'codemirror/mode/vue/vue.js'
28+
// active-line.js
29+
import 'codemirror/addon/selection/active-line.js'
30+
// styleSelectedText
31+
import 'codemirror/addon/selection/mark-selection.js'
32+
import 'codemirror/addon/search/searchcursor.js'
33+
// highlightSelectionMatches
34+
import 'codemirror/addon/scroll/annotatescrollbar.js'
35+
import 'codemirror/addon/search/matchesonscrollbar.js'
36+
import 'codemirror/addon/search/searchcursor.js'
37+
import 'codemirror/addon/search/match-highlighter.js'
38+
// keyMap
39+
import 'codemirror/mode/clike/clike.js'
40+
import 'codemirror/addon/edit/matchbrackets.js'
41+
import 'codemirror/addon/comment/comment.js'
42+
import 'codemirror/addon/dialog/dialog.js'
43+
import 'codemirror/addon/dialog/dialog.css'
44+
import 'codemirror/addon/search/searchcursor.js'
45+
import 'codemirror/addon/search/search.js'
46+
import 'codemirror/keymap/sublime.js'
47+
// foldGutter
48+
import 'codemirror/addon/fold/foldgutter.css'
49+
import 'codemirror/addon/fold/brace-fold.js'
50+
import 'codemirror/addon/fold/comment-fold.js'
51+
import 'codemirror/addon/fold/foldcode.js'
52+
import 'codemirror/addon/fold/foldgutter.js'
53+
import 'codemirror/addon/fold/indent-fold.js'
54+
import 'codemirror/addon/fold/markdown-fold.js'
55+
import 'codemirror/addon/fold/xml-fold.js'
5756
5857
export default {
5958
components: {
@@ -68,52 +67,44 @@ export default {
6867
},
6968
data() {
7069
return {
71-
code: `
72-
<!DOCTYPE html>
73-
<html>
74-
<head>
75-
<meta charset="utf-8">
76-
<title>Vue 测试实例</title>
77-
<script src="https://doc.vue-js.com/js/vue.js">${"</script>"}
78-
</head>
79-
<body>
80-
<div id="app">
81-
<p>{{ message }}</p>
82-
</div>
83-
<script>
84-
new Vue({
85-
el: '#app',
86-
data: {
87-
message: 'Hello Vue.js!'
88-
}
89-
})
90-
${"</script>"}
91-
</body>
92-
</html>
70+
code: `
71+
<!DOCTYPE html>
72+
<html>
73+
<head>
74+
<meta charset="utf-8">
75+
<title>Vue 测试实例</title>
76+
<script src="https://doc.vue-js.com/js/vue.js">${'<\/script>'}
77+
</head>
78+
<body>
79+
<div id="app">
80+
<p>{{ message }}</p>
81+
</div>
82+
<script>
83+
new Vue({
84+
el: '#app',
85+
data: {
86+
message: 'Hello Vue.js!'
87+
}
88+
})
89+
${'<\/script>'}
90+
</body>
91+
</html>
9392
`,
94-
cmOption: {
95-
tabSize: 4,
96-
foldGutter: true,
97-
styleActiveLine: true,
98-
lineNumbers: true,
99-
line: true,
100-
keyMap: "sublime",
101-
mode: "text/html",
102-
htmlMode: true,
103-
theme: "base16-dark",
104-
extraKeys: {
105-
F11(cm) {
106-
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
107-
},
108-
Esc(cm) {
109-
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
110-
}
93+
cmOption: {
94+
tabSize: 4,
95+
foldGutter: true,
96+
styleActiveLine: true,
97+
lineNumbers: true,
98+
line: true,
99+
keyMap: "sublime",
100+
mode: 'text/html',
101+
htmlMode: true,
102+
theme: 'base16-dark'
111103
}
112-
}
113-
}
104+
};
114105
},
115106
mounted() {
116-
this.run();
107+
this.run()
117108
},
118109
methods: {
119110
run() {
@@ -156,7 +147,7 @@ export default {
156147

157148
<style >
158149
.theme-default-content:not(.custom) {
159-
max-width: 70%;
150+
max-width: 60%;
160151
}
161152
.CodeMirror {
162153
border: 1px solid #eee;
@@ -173,12 +164,14 @@ export default {
173164
* {
174165
box-sizing: border-box;
175166
}
176-
.title {
167+
.run {
177168
display: flex;
178169
justify-content: space-between;
179170
padding: 10px 0;
180171
}
181-
.title button {
172+
.run button {
173+
outline: none;
174+
cursor: pointer;
182175
padding: 10px 15px;
183176
background: #4caf50;
184177
border-radius: 3px;
@@ -193,6 +186,8 @@ export default {
193186
margin: 0;
194187
overflow: auto;
195188
padding-top: 0;
189+
background: #f9f9f9;
190+
border: 1px solid #e8e8e8;
196191
}
197192
198193
.result {
@@ -201,8 +196,9 @@ export default {
201196
line-height: 1.6;
202197
word-break: break-all;
203198
word-wrap: break-word;
199+
border-radius: 8px;
204200
}
205-
.result h3 {
201+
.result h3{
206202
margin: 0;
207203
}
208-
</style>
204+
</style>

‎docs/.vuepress/config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
docsDir: "docs",
3131
docsBranch: "master",
3232
// 默认是 false, 设置为 true 来启用
33-
editLinks: true,
33+
editLinks: false,
3434
// 默认为 "Edit this page"
3535
editLinkText: "帮助我们改善此页面！",
3636
// displayAllHeaders: true,

‎docs/run/index.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
2-
navbar: false
2+
# navbar: false
33
sidebar: false
4+
editLinks: false
45
---
56

67
<Run />

0 commit comments

Comments
 (0)
Please sign in to comment.