Skip to content

Commit 2829da1

Browse files
ravenqravenq
committed
alter
1 parent b3bf34a commit 2829da1

File tree

2 files changed

+194
-73
lines changed

2 files changed

+194
-73
lines changed

‎example/components/example.js‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,27 @@ export default `
77
88
Note: Only \`h2\` and \`h3\` are shown in toc.
99
10+
11+
## alter
12+
13+
Markup is similar to fenced code blocks. Valid container types are \`success\`, \`info\`, \`warning\` and \`error\`.
14+
15+
::: success
16+
You have got it.
17+
:::
18+
19+
::: info
20+
You have new mail.
21+
:::
22+
23+
::: warning
24+
You have new mail.
25+
:::
26+
27+
::: error
28+
Staying up all night is bad for health.
29+
:::
30+
1031
## mermaid charts
1132
1233
### mermaid Flowchart
@@ -35,18 +56,6 @@ sequenceDiagram
3556
Bob-->John: Jolly good!
3657
\`\`\`
3758
38-
## Custom Container
39-
40-
Markup is similar to fenced code blocks. Valid container types are \`success\`, \`info\`, \`warning\` and \`danger\`.
41-
42-
::: info
43-
You have new mail.
44-
:::
45-
46-
::: danger
47-
Staying up all night is bad for health.
48-
:::
49-
5059
## Definition list
5160
5261
Term 1
@@ -179,4 +188,4 @@ para(path2, right)->op2->e
179188
st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
180189
\`\`\`
181190
182-
`
191+
`;

‎src/markdown-it-vue.vue‎

Lines changed: 172 additions & 60 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
@@ -42,37 +42,39 @@ export default {
4242
watch: {
4343
content: {
4444
immediate: true,
45-
handler (val) {
45+
handler(val) {
4646
this.$nextTick(() => {
47-
this.$refs['markdown-it-vue-container'].innerHTML = this.md.render(val)
47+
this.$refs["markdown-it-vue-container"].innerHTML = this.md.render(
48+
val
49+
);
4850
// render echarts
49-
document.querySelectorAll('.md-echarts').forEach(element => {
51+
document.querySelectorAll(".md-echarts").forEach(element => {
5052
try {
51-
let options = JSON.parse(element.textContent)
52-
let chart = echarts.init(element)
53-
chart.setOption(options)
53+
let options = JSON.parse(element.textContent);
54+
let chart = echarts.init(element);
55+
chart.setOption(options);
5456
} catch (e) {
55-
element.outerHTML = `<pre>echarts complains: ${e}</pre>`
57+
element.outerHTML = `<pre>echarts complains: ${e}</pre>`;
5658
}
57-
})
59+
});
5860
// render mermaid
59-
mermaid.init(undefined, document.querySelectorAll('.mermaid'))
61+
mermaid.init(undefined, document.querySelectorAll(".mermaid"));
6062
// render flowchart
61-
document.querySelectorAll('.md-flowchart').forEach(element => {
63+
document.querySelectorAll(".md-flowchart").forEach(element => {
6264
try {
63-
let code = element.textContent
64-
let chart = flowchart.parse(code)
65-
element.textContent = ''
66-
chart.drawSVG(element)
65+
let code = element.textContent;
66+
let chart = flowchart.parse(code);
67+
element.textContent = "";
68+
chart.drawSVG(element);
6769
} catch (e) {
68-
element.outerHTML = `<pre>flowchart complains: ${e}</pre>`
70+
element.outerHTML = `<pre>flowchart complains: ${e}</pre>`;
6971
}
70-
})
71-
})
72+
});
73+
});
7274
}
7375
}
7476
},
75-
data () {
77+
data() {
7678
let md = new MarkdownIt()
7779
.use(MarkdownItEmoji)
7880
.use(MarkdownItSubscript)
@@ -82,31 +84,141 @@ export default {
8284
.use(MarkdownItAbbreviation)
8385
.use(MarkdownItInsert)
8486
.use(MarkdownItMark)
85-
.use(MarkdownItKatex, {throwOnError: false, errorColor: '#cc0000'})
86-
.use(MarkdownItTasklists, {enabled: this.taskLists})
87-
.use(MarkdownItIcons, 'font-awesome')
87+
.use(MarkdownItKatex, { throwOnError: false, errorColor: "#cc0000" })
88+
.use(MarkdownItTasklists, { enabled: this.taskLists })
89+
.use(MarkdownItIcons, "font-awesome")
8890
.use(MarkdownItHighlight)
8991
.use(MarkdownItLatex)
90-
.use(MarkdownItContainer, 'success')
91-
.use(MarkdownItContainer, 'info')
92-
.use(MarkdownItContainer, 'warining')
93-
.use(MarkdownItContainer, 'danger')
92+
.use(MarkdownItContainer, "warning", {
93+
validate: function(params) {
94+
return params.trim() === "warning";
95+
},
96+
render: (tokens, idx) => {
97+
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}`;
100+
} else {
101+
return "</div>";
102+
}
103+
}
104+
})
105+
.use(MarkdownItContainer, "info", {
106+
validate: function(params) {
107+
return params.trim() === "info";
108+
},
109+
render: (tokens, idx) => {
110+
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}`;
113+
} else {
114+
return "</div>";
115+
}
116+
}
117+
})
118+
.use(MarkdownItContainer, "success", {
119+
validate: function(params) {
120+
return params.trim() === "success";
121+
},
122+
render: (tokens, idx) => {
123+
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}`;
126+
} else {
127+
return "</div>";
128+
}
129+
}
130+
})
131+
.use(MarkdownItContainer, "error", {
132+
validate: function(params) {
133+
return params.trim() === "error";
134+
},
135+
render: (tokens, idx) => {
136+
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}`;
139+
} else {
140+
return "</div>";
141+
}
142+
}
143+
})
94144
.use(MarkdownItGithubToc, {
95145
tocFirstLevel: 2,
96146
tocLastLevel: 3,
97-
tocClassName: 'toc',
98-
anchorLinkSymbol: '',
147+
tocClassName: "toc",
148+
anchorLinkSymbol: "",
99149
anchorLinkSpace: false,
100-
anchorClassName: 'anchor',
101-
anchorLinkSymbolClassName: 'octicon octicon-link'
150+
anchorClassName: "anchor",
151+
anchorLinkSymbolClassName: "octicon octicon-link"
102152
})
103153
.use(MarkdownItSourceMap)
104154
.use(MarkdownItMermaid)
105155
.use(MarkdownItEcharts)
106-
.use(MarkdownItFlowchart)
156+
.use(MarkdownItFlowchart);
107157
return {
108158
md: md
109-
}
159+
};
110160
}
111-
}
161+
};
112162
</script>
163+
164+
<style lange="scss">
165+
.markdown-it-vue-alter-info {
166+
border: 1px solid #91d5ff;
167+
background-color: #e6f7ff;
168+
}
169+
.markdown-it-vue-alert-icon-info {
170+
color: #1890ff;
171+
}
172+
.markdown-it-vue-alter-success {
173+
border: 1px solid #b7eb8f;
174+
background-color: #f6ffed;
175+
}
176+
.markdown-it-vue-alert-icon-success {
177+
color: #52c41a;;
178+
}
179+
.markdown-it-vue-alter-error {
180+
border: 1px solid #f5222d;
181+
background-color: #fff1f0;
182+
}
183+
.markdown-it-vue-alert-icon-error {
184+
color: #f5222d;
185+
}
186+
.markdown-it-vue-alter-warning {
187+
border: 1px solid #ffe58f;
188+
background-color: #fffbe6;
189+
}
190+
.markdown-it-vue-alert-icon-warning {
191+
color: #faad14;
192+
}
193+
.markdown-it-vue-alter {
194+
border-radius: 0;
195+
border: 0;
196+
margin-bottom: 0;
197+
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";
202+
font-size: 14px;
203+
font-variant: tabular-nums;
204+
line-height: 1.5;
205+
color: rgba(0, 0, 0, 0.65);
206+
box-sizing: border-box;
207+
padding: 0;
208+
list-style: none;
209+
position: relative;
210+
padding: 8px 15px 8px 37px;
211+
border-radius: 4px;
212+
width: 100%;
213+
margin-bottom: 16px;
214+
}
215+
.markdown-it-vue-alter p {
216+
margin-bottom: 2px;
217+
}
218+
219+
.markdown-it-vue-alert-icon {
220+
top: 11.5px;
221+
left: 16px;
222+
position: absolute;
223+
}
224+
</style>

0 commit comments

Comments
 (0)