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 90d432d

Browse files
author
febobo
committed
add code preview
1 parent 2054671 commit 90d432d

File tree

4 files changed

+10780
-0
lines changed

4 files changed

+10780
-0
lines changed

‎docs/.vuepress/components/Run.vue‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<template lang="html">
2+
<div>
3+
<div class="title">
4+
@Vue3js.cn
5+
<button @click="run">运行一下</button>
6+
</div>
7+
<div class="example">
8+
<div class="codemirror">
9+
<codemirror ref="cmEditor" v-model="code" :options="cmOption" />
10+
</div>
11+
<div class="result">
12+
<h3>result:</h3>
13+
<div id="iframe"></div>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import { codemirror } from "vue-codemirror";
21+
// base style
22+
import "codemirror/lib/codemirror.css";
23+
// theme css
24+
import "codemirror/theme/base16-dark.css";
25+
// language
26+
import "codemirror/mode/vue/vue.js";
27+
// active-line.js
28+
import "codemirror/addon/selection/active-line.js";
29+
// styleSelectedText
30+
import "codemirror/addon/selection/mark-selection.js";
31+
import "codemirror/addon/search/searchcursor.js";
32+
// highlightSelectionMatches
33+
import "codemirror/addon/scroll/annotatescrollbar.js";
34+
import "codemirror/addon/search/matchesonscrollbar.js";
35+
import "codemirror/addon/search/searchcursor.js";
36+
import "codemirror/addon/search/match-highlighter.js";
37+
// keyMap
38+
import "codemirror/mode/clike/clike.js";
39+
import "codemirror/addon/edit/matchbrackets.js";
40+
import "codemirror/addon/comment/comment.js";
41+
import "codemirror/addon/dialog/dialog.js";
42+
import "codemirror/addon/dialog/dialog.css";
43+
import "codemirror/addon/search/searchcursor.js";
44+
import "codemirror/addon/search/search.js";
45+
import "codemirror/keymap/sublime.js";
46+
// foldGutter
47+
import "codemirror/addon/fold/foldgutter.css";
48+
import "codemirror/addon/fold/brace-fold.js";
49+
import "codemirror/addon/fold/comment-fold.js";
50+
import "codemirror/addon/fold/foldcode.js";
51+
import "codemirror/addon/fold/foldgutter.js";
52+
import "codemirror/addon/fold/indent-fold.js";
53+
import "codemirror/addon/fold/markdown-fold.js";
54+
import "codemirror/addon/fold/xml-fold.js";
55+
56+
export default {
57+
components: {
58+
codemirror
59+
},
60+
name: "Run",
61+
props: {},
62+
computed: {
63+
codemirror() {
64+
return this.$refs.cmEditor.codemirror;
65+
}
66+
},
67+
data() {
68+
return {
69+
code: `<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>Vue 测试33实例 - 菜鸟教程(runoob.com)</title>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js\"></script>\n</head>\n<body>\n<div id=\"app\">\n <p>原始字符串: {{ message }}</p>\n <p>计算后反转字符串: {{ reversedMessage }}</p>\n</div>\n\n<script>\nlet vm = new Vue({\n el: '#app',\n data: {\n message: 'Runoob!'\n },\n computed: {\n // 计算属性的 getter\n reversedMessage: function () {\n return this.message.split('').reverse().join('')\n }\n }\n})\n</script>\n</body>\n</html>`,
70+
cmOption: {
71+
tabSize: 4,
72+
foldGutter: true,
73+
styleActiveLine: true,
74+
lineNumbers: true,
75+
line: true,
76+
keyMap: "sublime",
77+
mode: "text/x-vue",
78+
theme: "base16-dark",
79+
extraKeys: {
80+
F11(cm) {
81+
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
82+
},
83+
Esc(cm) {
84+
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
85+
}
86+
}
87+
}
88+
};
89+
},
90+
methods: {
91+
run() {
92+
let text = this.codemirror.getValue();
93+
let patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im;
94+
let patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im;
95+
let array_matches_head = patternHead.exec(text);
96+
let patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
97+
98+
let array_matches_body = patternBody.exec(text);
99+
let basepath_flag = 1;
100+
let basepath = "";
101+
if (array_matches_head) {
102+
text = text.replace("<head>", "<head>" + basepath);
103+
} else if (patternHtml) {
104+
text = text.replace("<html>", "<head>" + basepath + "</head>");
105+
} else if (array_matches_body) {
106+
text = text.replace("<body>", "<body>" + basepath);
107+
} else {
108+
text = basepath + text;
109+
}
110+
let ifr = document.createElement("iframe");
111+
ifr.setAttribute("frameborder", "0");
112+
ifr.setAttribute("id", "iframeResult");
113+
document.getElementById("iframe").innerHTML = "";
114+
document.getElementById("iframe").appendChild(ifr);
115+
116+
let ifrw = ifr.contentWindow
117+
? ifr.contentWindow
118+
: ifr.contentDocument.document
119+
? ifr.contentDocument.document
120+
: ifr.contentDocument;
121+
ifrw.document.open();
122+
ifrw.document.write(text);
123+
ifrw.document.close();
124+
}
125+
}
126+
};
127+
</script>
128+
129+
<style >
130+
.theme-default-content:not(.custom) {
131+
max-width: 70%;
132+
}
133+
.CodeMirror {
134+
border: 1px solid #eee;
135+
height: auto;
136+
}
137+
138+
.CodeMirror-scroll {
139+
height: auto;
140+
overflow-y: hidden;
141+
overflow-x: auto;
142+
}
143+
</style>
144+
<style scoped>
145+
* {
146+
box-sizing: border-box;
147+
}
148+
.title {
149+
display: flex;
150+
justify-content: space-between;
151+
padding: 10px 0;
152+
}
153+
.title button {
154+
padding: 10px 15px;
155+
background: #4caf50;
156+
border-radius: 3px;
157+
color: #fff;
158+
border: none;
159+
}
160+
.example {
161+
display: flex;
162+
height: 70vh;
163+
background: #f7f7f7;
164+
padding: 30px;
165+
border-radius: 15px;
166+
}
167+
.codemirror,
168+
.result {
169+
width: 50%;
170+
height: 100%;
171+
margin: 0;
172+
overflow: auto;
173+
padding-top: 0;
174+
}
175+
176+
.result {
177+
display: block;
178+
padding: 1rem;
179+
line-height: 1.6;
180+
word-break: break-all;
181+
word-wrap: break-word;
182+
}
183+
.result h3{
184+
margin: 0;
185+
}
186+
</style>

‎docs/run/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
navbar: false
3+
sidebar: false
4+
---
5+
6+
<Run />

0 commit comments

Comments
(0)

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