mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-17 23:10:35 +03:00
Code Activity

docs(example): fix hljs

Browse Source
This commit is contained in:
mengxiong10
2019-11-20 14:52:32 +08:00
parent cdb45bd328
commit f9d21eb3a1
5 changed files with 55 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/app.js
-9
View File
@@ -1,11 +1,6 @@
/* eslint-disable global-require */
/* eslint-disable import/no-extraneous-dependencies */
import fs from 'fs';
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';
import 'highlight.js/styles/atom-one-light.css';
import Container from './helper/container.vue';
import Card from './helper/card.vue';
import Basic from './demo/Basic.vue';
@@ -23,9 +18,6 @@ import Disabled from './demo/Disabled.vue';
import docEn from './en.md';
import docZhCN from './zh-cn.md';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('xml', xml);
const components = [
{
id: 'Basic',
@@ -133,7 +125,6 @@ const App = {
};
},
mounted() {
hljs.initHighlighting();
window.onhashchange = () => {
this.currentId = this.getCurrentId();
};
example/dev.html
+1
View File
@@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
<script src="https://polyfill.io/v3/polyfill.js?features=Promise,fetch&flags=gated"></script>
</head>
<body>
<div id="app"></div>
example/helper/card.vue
+3 -24
View File
@@ -10,18 +10,17 @@
<img v-else alt="hide code" class="icon-expand" src="../assets/collapse.svg" />
</section>
<section v-show="codeVisible" class="card-code">
<pre>
<code class="vue">{{code}}</code>
</pre>
<highlight-code :value="code"></highlight-code>
</section>
</div>
</template>
<script>
// TODO: 替换img 图标, 本地
import HighlightCode from './highlight-code';
export default {
name: 'DemoCard',
components: { HighlightCode },
props: {
id: String,
title: String,
@@ -142,25 +141,5 @@ $border-color: #ebedf0;
.card-code {
border-top: 1px solid $border-color;
pre {
margin: 0;
background: #fff;
&::after,
&::before {
width: 0;
}
// 添加优先级, 覆盖 引入的样式
code {
display: block;
background: #fff;
color: #314659;
line-height: 2;
border: 0;
box-shadow: none;
padding: 16px 32px;
border-radius: 2px;
font-size: 14px;
}
}
}
</style>
example/helper/highlight-code.vue
+50
View File
@@ -0,0 +1,50 @@
<template>
<pre class="highlight-code">
<code ref="code">{{value}}</code>
</pre>
</template>
<script>
/* eslint-disable import/no-extraneous-dependencies */
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';
import 'highlight.js/styles/atom-one-light.css';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('xml', xml);
export default {
props: {
value: {
type: String,
},
},
mounted() {
hljs.highlightBlock(this.$refs.code);
},
};
</script>
<style lang="scss">
.highlight-code {
margin: 0;
background: #fff;
&::after,
&::before {
width: 0;
}
// 添加优先级, 覆盖 引入的样式
code {
display: block;
background: #fff;
color: #314659;
line-height: 2;
border: 0;
box-shadow: none;
padding: 16px 32px;
border-radius: 2px;
font-size: 14px;
}
}
</style>
example/index.html
+1
View File
@@ -7,6 +7,7 @@
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
<link rel="stylesheet" href="https://unpkg.com/vue2-datepicker/index.css" />
<script src="https://polyfill.io/v3/polyfill.js?features=Promise,fetch&flags=gated"></script>
</head>
<body>
<div id="app"></div>