mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-24 22:30:36 +03:00
docs(example): fix hljs
This commit is contained in:
mengxiong10
@@ -1,11 +1,6 @@
|
|||||||
/* eslint-disable global-require */
|
/* eslint-disable global-require */
|
||||||
/* eslint-disable import/no-extraneous-dependencies */
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
import fs from 'fs';
|
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 Container from './helper/container.vue';
|
||||||
import Card from './helper/card.vue';
|
import Card from './helper/card.vue';
|
||||||
import Basic from './demo/Basic.vue';
|
import Basic from './demo/Basic.vue';
|
||||||
@@ -23,9 +18,6 @@ import Disabled from './demo/Disabled.vue';
|
|||||||
import docEn from './en.md';
|
import docEn from './en.md';
|
||||||
import docZhCN from './zh-cn.md';
|
import docZhCN from './zh-cn.md';
|
||||||
|
|
||||||
hljs.registerLanguage('javascript', javascript);
|
|
||||||
hljs.registerLanguage('xml', xml);
|
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
{
|
{
|
||||||
id: 'Basic',
|
id: 'Basic',
|
||||||
@@ -133,7 +125,6 @@ const App = {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
hljs.initHighlighting();
|
|
||||||
window.onhashchange = () => {
|
window.onhashchange = () => {
|
||||||
this.currentId = this.getCurrentId();
|
this.currentId = this.getCurrentId();
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+3
-24
@@ -10,18 +10,17 @@
|
|||||||
<img v-else alt="hide code" class="icon-expand" src="../assets/collapse.svg" />
|
<img v-else alt="hide code" class="icon-expand" src="../assets/collapse.svg" />
|
||||||
</section>
|
</section>
|
||||||
<section v-show="codeVisible" class="card-code">
|
<section v-show="codeVisible" class="card-code">
|
||||||
<pre>
|
<highlight-code :value="code"></highlight-code>
|
||||||
<code class="vue">{{code}}</code>
|
|
||||||
</pre>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// TODO: 替换img 图标, 本地
|
import HighlightCode from './highlight-code';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DemoCard',
|
name: 'DemoCard',
|
||||||
|
components: { HighlightCode },
|
||||||
props: {
|
props: {
|
||||||
id: String,
|
id: String,
|
||||||
title: String,
|
title: String,
|
||||||
@@ -142,25 +141,5 @@ $border-color: #ebedf0;
|
|||||||
|
|
||||||
.card-code {
|
.card-code {
|
||||||
border-top: 1px solid $border-color;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css" />
|
<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" />
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user