Skip to content

Commit f9d21eb

Browse files
mengxiong10mengxiong10
committed
docs(example): fix hljs
1 parent cdb45bd commit f9d21eb

File tree

5 files changed

+55
-33
lines changed

5 files changed

+55
-33
lines changed

‎example/app.js

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
/* eslint-disable global-require */
22
/* eslint-disable import/no-extraneous-dependencies */
33
import fs from 'fs';
4-
import hljs from 'highlight.js/lib/highlight';
5-
import javascript from 'highlight.js/lib/languages/javascript';
6-
import xml from 'highlight.js/lib/languages/xml';
7-
import 'highlight.js/styles/atom-one-light.css';
8-
94
import Container from './helper/container.vue';
105
import Card from './helper/card.vue';
116
import Basic from './demo/Basic.vue';
@@ -23,9 +18,6 @@ import Disabled from './demo/Disabled.vue';
2318
import docEn from './en.md';
2419
import docZhCN from './zh-cn.md';
2520

26-
hljs.registerLanguage('javascript', javascript);
27-
hljs.registerLanguage('xml', xml);
28-
2921
const components = [
3022
{
3123
id: 'Basic',
@@ -133,7 +125,6 @@ const App = {
133125
};
134126
},
135127
mounted() {
136-
hljs.initHighlighting();
137128
window.onhashchange = () => {
138129
this.currentId = this.getCurrentId();
139130
};

‎example/dev.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
77
<title>Document</title>
88
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
9+
<script src="https://polyfill.io/v3/polyfill.js?features=Promise,fetch&flags=gated"></script>
910
</head>
1011
<body>
1112
<div id="app"></div>

‎example/helper/card.vue

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,17 @@
1010
<img v-else alt="hide code" class="icon-expand" src="../assets/collapse.svg" />
1111
</section>
1212
<section v-show="codeVisible" class="card-code">
13-
<pre>
14-
<code class="vue">{{code}}</code>
15-
</pre>
13+
<highlight-code :value="code"></highlight-code>
1614
</section>
1715
</div>
1816
</template>
1917

2018
<script>
21-
// TODO: 替换img 图标, 本地
19+
import HighlightCode from './highlight-code';
2220
2321
export default {
2422
name: 'DemoCard',
23+
components: { HighlightCode },
2524
props: {
2625
id: String,
2726
title: String,
@@ -142,25 +141,5 @@ $border-color: #ebedf0;
142141
143142
.card-code {
144143
border-top: 1px solid $border-color;
145-
pre {
146-
margin: 0;
147-
background: #fff;
148-
&::after,
149-
&::before {
150-
width: 0;
151-
}
152-
// 添加优先级, 覆盖 引入的样式
153-
code {
154-
display: block;
155-
background: #fff;
156-
color: #314659;
157-
line-height: 2;
158-
border: 0;
159-
box-shadow: none;
160-
padding: 16px 32px;
161-
border-radius: 2px;
162-
font-size: 14px;
163-
}
164-
}
165144
}
166145
</style>

‎example/helper/highlight-code.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<pre class="highlight-code">
3+
<code ref="code">{{value}}</code>
4+
</pre>
5+
</template>
6+
7+
<script>
8+
/* eslint-disable import/no-extraneous-dependencies */
9+
import hljs from 'highlight.js/lib/highlight';
10+
import javascript from 'highlight.js/lib/languages/javascript';
11+
import xml from 'highlight.js/lib/languages/xml';
12+
import 'highlight.js/styles/atom-one-light.css';
13+
14+
hljs.registerLanguage('javascript', javascript);
15+
hljs.registerLanguage('xml', xml);
16+
17+
export default {
18+
props: {
19+
value: {
20+
type: String,
21+
},
22+
},
23+
mounted() {
24+
hljs.highlightBlock(this.$refs.code);
25+
},
26+
};
27+
</script>
28+
29+
<style lang="scss">
30+
.highlight-code {
31+
margin: 0;
32+
background: #fff;
33+
&::after,
34+
&::before {
35+
width: 0;
36+
}
37+
// 添加优先级, 覆盖 引入的样式
38+
code {
39+
display: block;
40+
background: #fff;
41+
color: #314659;
42+
line-height: 2;
43+
border: 0;
44+
box-shadow: none;
45+
padding: 16px 32px;
46+
border-radius: 2px;
47+
font-size: 14px;
48+
}
49+
}
50+
</style>

‎example/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<title>Document</title>
88
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
99
<link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css" />
10+
<script src="https://polyfill.io/v3/polyfill.js?features=Promise,fetch&flags=gated"></script>
1011
</head>
1112
<body>
1213
<div id="app"></div>

0 commit comments

Comments
 (0)