Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5c7fbef

Browse files
author
febobo
committed
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‎

Lines changed: 81 additions & 85 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 2 additions & 1 deletion
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)

AltStyle によって変換されたページ (->オリジナル) /