Skip to content

Commit 19cf7c6

Browse files
ravenqravenq
committed
code style
1 parent 6c5dd4c commit 19cf7c6

File tree

2 files changed

+83
-79
lines changed

2 files changed

+83
-79
lines changed

‎.prettierrc.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"semi": false
4+
}

‎src/markdown-it-vue.vue‎

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,37 @@
33
</template>
44

55
<script>
6-
import MarkdownIt from "markdown-it";
7-
import MarkdownItEmoji from "markdown-it-emoji";
8-
import MarkdownItSubscript from "markdown-it-sub";
9-
import MarkdownItSuperscript from "markdown-it-sup";
10-
import MarkdownItFootnote from "markdown-it-footnote";
11-
import MarkdownItDeflist from "markdown-it-deflist";
12-
import MarkdownItAbbreviation from "markdown-it-abbr";
13-
import MarkdownItInsert from "markdown-it-ins";
14-
import MarkdownItMark from "markdown-it-mark";
15-
import MarkdownItKatex from "markdown-it-katex";
16-
import MarkdownItTasklists from "markdown-it-task-lists";
17-
import MarkdownItIcons from "markdown-it-icons";
18-
import MarkdownItHighlight from "markdown-it-highlight";
19-
import MarkdownItLatex from "markdown-it-latex";
20-
import MarkdownItContainer from "markdown-it-container";
21-
import MarkdownItGithubToc from "markdown-it-github-toc";
22-
import MarkdownItSourceMap from "markdown-it-source-map";
23-
import MarkdownItEcharts from "./markdown-it-plugin-echarts";
24-
import MarkdownItMermaid from "./markdown-it-plugin-mermaid";
25-
import MarkdownItFlowchart from "./markdown-it-plugin-flowchart";
26-
import "github-markdown-css";
27-
import "markdown-it-latex/dist/index.css";
28-
import "markdown-it-icons/dist/index.css";
29-
import "markdown-it-highlight/dist/index.css";
6+
import MarkdownIt from 'markdown-it'
7+
import MarkdownItEmoji from 'markdown-it-emoji'
8+
import MarkdownItSubscript from 'markdown-it-sub'
9+
import MarkdownItSuperscript from 'markdown-it-sup'
10+
import MarkdownItFootnote from 'markdown-it-footnote'
11+
import MarkdownItDeflist from 'markdown-it-deflist'
12+
import MarkdownItAbbreviation from 'markdown-it-abbr'
13+
import MarkdownItInsert from 'markdown-it-ins'
14+
import MarkdownItMark from 'markdown-it-mark'
15+
import MarkdownItKatex from 'markdown-it-katex'
16+
import MarkdownItTasklists from 'markdown-it-task-lists'
17+
import MarkdownItIcons from 'markdown-it-icons'
18+
import MarkdownItHighlight from 'markdown-it-highlight'
19+
import MarkdownItLatex from 'markdown-it-latex'
20+
import MarkdownItContainer from 'markdown-it-container'
21+
import MarkdownItGithubToc from 'markdown-it-github-toc'
22+
import MarkdownItSourceMap from 'markdown-it-source-map'
23+
import MarkdownItEcharts from './markdown-it-plugin-echarts'
24+
import MarkdownItMermaid from './markdown-it-plugin-mermaid'
25+
import MarkdownItFlowchart from './markdown-it-plugin-flowchart'
26+
import 'github-markdown-css'
27+
import 'markdown-it-latex/dist/index.css'
28+
import 'markdown-it-icons/dist/index.css'
29+
import 'markdown-it-highlight/dist/index.css'
3030
31-
import echarts from "echarts";
32-
import mermaid from "mermaid";
33-
import flowchart from "flowchart.js";
31+
import echarts from 'echarts'
32+
import mermaid from 'mermaid'
33+
import flowchart from 'flowchart.js'
3434
3535
export default {
36-
name: "markdown-it-vue",
36+
name: 'markdown-it-vue',
3737
props: {
3838
content: {
3939
type: String
@@ -44,33 +44,33 @@ export default {
4444
immediate: true,
4545
handler(val) {
4646
this.$nextTick(() => {
47-
this.$refs["markdown-it-vue-container"].innerHTML = this.md.render(
47+
this.$refs['markdown-it-vue-container'].innerHTML = this.md.render(
4848
val
49-
);
49+
)
5050
// render echarts
51-
document.querySelectorAll(".md-echarts").forEach(element => {
51+
document.querySelectorAll('.md-echarts').forEach(element => {
5252
try {
53-
let options = JSON.parse(element.textContent);
54-
let chart = echarts.init(element);
55-
chart.setOption(options);
53+
let options = JSON.parse(element.textContent)
54+
let chart = echarts.init(element)
55+
chart.setOption(options)
5656
} catch (e) {
57-
element.outerHTML = `<pre>echarts complains: ${e}</pre>`;
57+
element.outerHTML = `<pre>echarts complains: ${e}</pre>`
5858
}
59-
});
59+
})
6060
// render mermaid
61-
mermaid.init(undefined, document.querySelectorAll(".mermaid"));
61+
mermaid.init(undefined, document.querySelectorAll('.mermaid'))
6262
// render flowchart
63-
document.querySelectorAll(".md-flowchart").forEach(element => {
63+
document.querySelectorAll('.md-flowchart').forEach(element => {
6464
try {
65-
let code = element.textContent;
66-
let chart = flowchart.parse(code);
67-
element.textContent = "";
68-
chart.drawSVG(element);
65+
let code = element.textContent
66+
let chart = flowchart.parse(code)
67+
element.textContent = ''
68+
chart.drawSVG(element)
6969
} catch (e) {
70-
element.outerHTML = `<pre>flowchart complains: ${e}</pre>`;
70+
element.outerHTML = `<pre>flowchart complains: ${e}</pre>`
7171
}
72-
});
73-
});
72+
})
73+
})
7474
}
7575
}
7676
},
@@ -84,81 +84,81 @@ export default {
8484
.use(MarkdownItAbbreviation)
8585
.use(MarkdownItInsert)
8686
.use(MarkdownItMark)
87-
.use(MarkdownItKatex, { throwOnError: false, errorColor: "#cc0000" })
87+
.use(MarkdownItKatex, { throwOnError: false, errorColor: '#cc0000' })
8888
.use(MarkdownItTasklists, { enabled: this.taskLists })
89-
.use(MarkdownItIcons, "font-awesome")
89+
.use(MarkdownItIcons, 'font-awesome')
9090
.use(MarkdownItHighlight)
9191
.use(MarkdownItLatex)
92-
.use(MarkdownItContainer, "warning", {
92+
.use(MarkdownItContainer, 'warning', {
9393
validate: function(params) {
94-
return params.trim() === "warning";
94+
return params.trim() === 'warning'
9595
},
9696
render: (tokens, idx) => {
9797
if (tokens[idx].nesting === 1) {
98-
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-warning"><svg viewBox="64 64 896 896" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg></i>`;
99-
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-warning">${icon}`;
98+
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-warning"><svg viewBox="64 64 896 896" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg></i>`
99+
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-warning">${icon}`
100100
} else {
101-
return "</div>";
101+
return '</div>'
102102
}
103103
}
104104
})
105-
.use(MarkdownItContainer, "info", {
105+
.use(MarkdownItContainer, 'info', {
106106
validate: function(params) {
107-
return params.trim() === "info";
107+
return params.trim() === 'info'
108108
},
109109
render: (tokens, idx) => {
110110
if (tokens[idx].nesting === 1) {
111-
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-info"><svg viewBox="64 64 896 896" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg></i>`;
112-
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-info">${icon}`;
111+
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-info"><svg viewBox="64 64 896 896" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg></i>`
112+
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-info">${icon}`
113113
} else {
114-
return "</div>";
114+
return '</div>'
115115
}
116116
}
117117
})
118-
.use(MarkdownItContainer, "success", {
118+
.use(MarkdownItContainer, 'success', {
119119
validate: function(params) {
120-
return params.trim() === "success";
120+
return params.trim() === 'success'
121121
},
122122
render: (tokens, idx) => {
123123
if (tokens[idx].nesting === 1) {
124-
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-success"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></i>`;
125-
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-success">${icon}`;
124+
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-success"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></i>`
125+
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-success">${icon}`
126126
} else {
127-
return "</div>";
127+
return '</div>'
128128
}
129129
}
130130
})
131-
.use(MarkdownItContainer, "error", {
131+
.use(MarkdownItContainer, 'error', {
132132
validate: function(params) {
133-
return params.trim() === "error";
133+
return params.trim() === 'error'
134134
},
135135
render: (tokens, idx) => {
136136
if (tokens[idx].nesting === 1) {
137-
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-error"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i>`;
138-
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-error">${icon}`;
137+
const icon = `<i class="markdown-it-vue-alert-icon markdown-it-vue-alert-icon-error"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i>`
138+
return `<div class="markdown-it-vue-alter markdown-it-vue-alter-error">${icon}`
139139
} else {
140-
return "</div>";
140+
return '</div>'
141141
}
142142
}
143143
})
144144
.use(MarkdownItGithubToc, {
145145
tocFirstLevel: 2,
146146
tocLastLevel: 3,
147-
tocClassName: "toc",
148-
anchorLinkSymbol: "",
147+
tocClassName: 'toc',
148+
anchorLinkSymbol: '',
149149
anchorLinkSpace: false,
150-
anchorClassName: "anchor",
151-
anchorLinkSymbolClassName: "octicon octicon-link"
150+
anchorClassName: 'anchor',
151+
anchorLinkSymbolClassName: 'octicon octicon-link'
152152
})
153153
.use(MarkdownItSourceMap)
154154
.use(MarkdownItMermaid)
155155
.use(MarkdownItEcharts)
156-
.use(MarkdownItFlowchart);
156+
.use(MarkdownItFlowchart)
157157
return {
158158
md: md
159-
};
159+
}
160160
}
161-
};
161+
}
162162
</script>
163163

164164
<style lange="scss">
@@ -174,7 +174,7 @@ export default {
174174
background-color: #f6ffed;
175175
}
176176
.markdown-it-vue-alert-icon-success {
177-
color: #52c41a;;
177+
color: #52c41a;
178178
}
179179
.markdown-it-vue-alter-error {
180180
border: 1px solid #f5222d;
@@ -195,10 +195,10 @@ export default {
195195
border: 0;
196196
margin-bottom: 0;
197197
display: inline-flex;
198-
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI",
199-
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
200-
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
201-
"Segoe UI Symbol";
198+
font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI',
199+
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
200+
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
201+
'Segoe UI Symbol';
202202
font-size: 14px;
203203
font-variant: tabular-nums;
204204
line-height: 1.5;

0 commit comments

Comments
 (0)