vuepress-plugin-md-power 1.0.0-rc.92 → 1.0.0-rc.94
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -67,20 +67,16 @@ function runCode() {
|
|
|
67
67
|
</p>
|
|
68
68
|
<div v-if="stderr.length" class="stderr">
|
|
69
69
|
<h4>Stderr:</h4>
|
|
70
|
-
<
|
|
70
|
+
<pre
|
|
71
71
|
v-for="(item, index) in stderr" :key="index"
|
|
72
72
|
:class="{ error: lang === 'rust' && item.startsWith('error') }"
|
|
73
|
-
>
|
|
74
|
-
<pre>{{ item }}</pre>
|
|
75
|
-
</p>
|
|
73
|
+
>{{ item }}</pre>
|
|
76
74
|
</div>
|
|
77
75
|
<div v-if="stdout.length" class="stdout">
|
|
78
76
|
<h4 v-if="stderr.length">
|
|
79
77
|
Stdout:
|
|
80
78
|
</h4>
|
|
81
|
-
<
|
|
82
|
-
<pre>{{ item }}</pre>
|
|
83
|
-
</p>
|
|
79
|
+
<pre v-for="(item, index) in stdout" :key="index">{{ item }}</pre>
|
|
84
80
|
</div>
|
|
85
81
|
</div>
|
|
86
82
|
</div>
|
|
@@ -214,13 +210,13 @@ function runCode() {
|
|
|
214
210
|
font-size: 16px;
|
|
215
211
|
}
|
|
216
212
|
|
|
217
|
-
.output-content
|
|
213
|
+
.output-content pre {
|
|
218
214
|
margin: 0;
|
|
219
215
|
font-size: 14px;
|
|
220
216
|
line-height: 20px;
|
|
221
217
|
}
|
|
222
218
|
|
|
223
|
-
.output-content
|
|
219
|
+
.output-content pre {
|
|
224
220
|
width: fit-content;
|
|
225
221
|
padding: 0 20px 0 0;
|
|
226
222
|
margin: 0;
|
|
@@ -228,13 +224,13 @@ function runCode() {
|
|
|
228
224
|
}
|
|
229
225
|
|
|
230
226
|
.output-content .error,
|
|
231
|
-
.output-content .stderr
|
|
232
|
-
.output-content.rust .stderr
|
|
227
|
+
.output-content .stderr pre,
|
|
228
|
+
.output-content.rust .stderr pre.error {
|
|
233
229
|
color: var(--vp-c-danger-1, #b8272c);
|
|
234
230
|
transition: color var(--t-color);
|
|
235
231
|
}
|
|
236
232
|
|
|
237
|
-
.output-content.rust .stderr
|
|
233
|
+
.output-content.rust .stderr pre {
|
|
238
234
|
color: var(--vp-c-text-1);
|
|
239
235
|
}
|
|
240
236
|
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { onMounted, ref } from 'vue'
|
|
3
|
+
|
|
4
|
+
const props = defineProps<{
|
|
5
|
+
type: 'file' | 'folder'
|
|
6
|
+
expanded: boolean
|
|
7
|
+
empty: boolean
|
|
8
|
+
}>()
|
|
9
|
+
|
|
10
|
+
const active = ref(!!props.expanded)
|
|
11
|
+
const el = ref<HTMLElement>()
|
|
12
|
+
|
|
13
|
+
onMounted(() => {
|
|
14
|
+
if (!el.value || props.type !== 'folder')
|
|
15
|
+
return
|
|
16
|
+
|
|
17
|
+
el.value.querySelector('.tree-node.folder')?.addEventListener('click', () => {
|
|
18
|
+
active.value = !active.value
|
|
19
|
+
})
|
|
20
|
+
})
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<template>
|
|
24
|
+
<li ref="el" class="file-tree-item" :class="{ expanded: active }">
|
|
25
|
+
<slot />
|
|
26
|
+
<ul v-if="props.type === 'folder' && props.empty">
|
|
27
|
+
<li class="file-tree-item">
|
|
28
|
+
<span class="tree-node file">
|
|
29
|
+
<span class="name">…</span>
|
|
30
|
+
</span>
|
|
31
|
+
</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</li>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<style>
|
|
37
|
+
.vp-file-tree {
|
|
38
|
+
width: fit-content;
|
|
39
|
+
max-width: 100%;
|
|
40
|
+
padding: 16px;
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
background-color: var(--vp-c-bg-safe);
|
|
43
|
+
border: solid 1px var(--vp-c-divider);
|
|
44
|
+
border-radius: 8px;
|
|
45
|
+
transition: border var(--t-color), background-color var(--t-color);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.vp-file-tree ul {
|
|
49
|
+
padding: 0 !important;
|
|
50
|
+
margin: 0 !important;
|
|
51
|
+
list-style: none !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.file-tree-item {
|
|
55
|
+
margin-left: 14px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.vp-file-tree .file-tree-item {
|
|
59
|
+
margin-top: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.file-tree-item .tree-node {
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-wrap: wrap;
|
|
65
|
+
gap: 8px;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: flex-start;
|
|
68
|
+
margin: 4px 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.file-tree-item .tree-node .name {
|
|
72
|
+
font-family: var(--vp-font-family-mono);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.file-tree-item .tree-node.folder {
|
|
76
|
+
position: relative;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.file-tree-item .tree-node.folder > .name {
|
|
80
|
+
color: var(--vp-c-text-1);
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
transition: color var(--t-color);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.file-tree-item .tree-node.folder > .name:hover {
|
|
86
|
+
color: var(--vp-c-brand-1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.file-tree-item .tree-node.folder::before {
|
|
90
|
+
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5.536 21.886a1 1 0 0 0 1.033-.064l13-9a1 1 0 0 0 0-1.644l-13-9A1 1 0 0 0 5 3v18a1 1 0 0 0 .536.886'/%3E%3C/svg%3E");
|
|
91
|
+
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 7px;
|
|
94
|
+
left: -14px;
|
|
95
|
+
display: block;
|
|
96
|
+
width: 10px;
|
|
97
|
+
height: 10px;
|
|
98
|
+
color: var(--vp-c-text-3);
|
|
99
|
+
content: "";
|
|
100
|
+
background-color: currentcolor;
|
|
101
|
+
-webkit-mask: var(--icon) no-repeat;
|
|
102
|
+
mask: var(--icon) no-repeat;
|
|
103
|
+
-webkit-mask-size: 100% 100%;
|
|
104
|
+
mask-size: 100% 100%;
|
|
105
|
+
transition: color var(--t-color);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.file-tree-item .tree-node.file .name.focus {
|
|
109
|
+
font-weight: bold;
|
|
110
|
+
color: var(--vp-c-brand-1);
|
|
111
|
+
transition: color var(--t-color);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.file-tree-item .tree-node .comment {
|
|
115
|
+
margin-left: 20px;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
color: var(--vp-c-text-3);
|
|
118
|
+
transition: color var(--t-color);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.file-tree-item .tree-node [class*="vp-fti-"] {
|
|
122
|
+
display: inline-block;
|
|
123
|
+
width: 0.9em;
|
|
124
|
+
height: 0.9em;
|
|
125
|
+
color: var(--vp-c-text-2);
|
|
126
|
+
background-color: currentcolor;
|
|
127
|
+
-webkit-mask: var(--icon) no-repeat;
|
|
128
|
+
mask: var(--icon) no-repeat;
|
|
129
|
+
-webkit-mask-size: 100% 100%;
|
|
130
|
+
mask-size: 100% 100%;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.file-tree-item .tree-node.folder [class*="vp-fti-"] {
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.vp-file-tree .file-tree-item > ul {
|
|
138
|
+
padding-left: 8px !important;
|
|
139
|
+
margin: 0 0 0 6px !important;
|
|
140
|
+
border-left: solid 1px var(--vp-c-divider);
|
|
141
|
+
transition: border-color var(--t-color);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.file-tree-item:not(.expanded) > ul {
|
|
145
|
+
display: none;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.file-tree-item.expanded > .tree-node.folder::before {
|
|
149
|
+
transform: rotate(90deg);
|
|
150
|
+
}
|
|
151
|
+
</style>
|
|
@@ -9,14 +9,14 @@ declare function resolveCodeInfo(el: HTMLDivElement): {
|
|
|
9
9
|
declare function useCodeRepl(el: Ref<HTMLDivElement | null>): {
|
|
10
10
|
onRunCode: () => Promise<void>;
|
|
11
11
|
onCleanRun: () => void;
|
|
12
|
-
lang: Ref<Lang | undefined>;
|
|
13
|
-
backendVersion: Ref<string>;
|
|
14
|
-
firstRun: Ref<boolean>;
|
|
15
|
-
stderr: Ref<string[]>;
|
|
16
|
-
stdout: Ref<string[]>;
|
|
17
|
-
loaded: Ref<boolean>;
|
|
18
|
-
finished: Ref<boolean>;
|
|
19
|
-
error: Ref<string>;
|
|
12
|
+
lang: Ref<Lang | undefined, Lang | undefined>;
|
|
13
|
+
backendVersion: Ref<string, string>;
|
|
14
|
+
firstRun: Ref<boolean, boolean>;
|
|
15
|
+
stderr: Ref<string[], string[]>;
|
|
16
|
+
stdout: Ref<string[], string[]>;
|
|
17
|
+
loaded: Ref<boolean, boolean>;
|
|
18
|
+
finished: Ref<boolean, boolean>;
|
|
19
|
+
error: Ref<string, string>;
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
export { resolveCode, resolveCodeInfo, useCodeRepl };
|