mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-02 12:34:44 +00:00
Format code-block and apply clipboard.js
This commit is contained in:
Marcos Moura
parent
61ad868868
commit
dce4b3660b
5 changed files with 166 additions and 41 deletions
|
|
@ -1,65 +1,100 @@
|
|||
<template>
|
||||
<div class="code-block">
|
||||
<pre><code :class="lang" ref="block"><slot></slot></code></pre>
|
||||
<div class="code-block" :data-lang="lang">
|
||||
<div class="code-block-wrapper">
|
||||
<pre><code :class="lang" ref="block"><slot></slot></code></pre>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-dense" ref="copy">
|
||||
<md-icon>content_copy</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.code-block {
|
||||
width: 100%;
|
||||
padding: 4px 32px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
border-radius: 2px;
|
||||
background-color: #eee;
|
||||
color: #455A64;
|
||||
font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.md-icon-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 12px;
|
||||
transition: $swift-ease-out;
|
||||
color: rgba(#000, .26);
|
||||
font-family: $font-roboto;
|
||||
font-size: 11px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
&[data-lang="html"]:after {
|
||||
content: 'HTML';
|
||||
}
|
||||
|
||||
&[data-lang="javascript"]:after {
|
||||
content: 'Javascript';
|
||||
}
|
||||
|
||||
&[data-lang="xml"]:after {
|
||||
content: 'HTML';
|
||||
}
|
||||
|
||||
&[data-lang="scss"]:after {
|
||||
content: 'SCSS';
|
||||
}
|
||||
|
||||
+ .code-block {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hljs:after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
color: rgba(#000, .26);
|
||||
font-family: $font-roboto;
|
||||
font-size: 11px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.code-block-wrapper {
|
||||
min-width: 100%;
|
||||
max-height: 500px;
|
||||
margin: -16px;
|
||||
padding: 0 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.hljs.html:after {
|
||||
content: 'HTML';
|
||||
}
|
||||
.md-icon-button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
.hljs.javascript:after {
|
||||
content: 'Javascript';
|
||||
}
|
||||
|
||||
.hljs.xml:after {
|
||||
content: 'HTML';
|
||||
}
|
||||
|
||||
.hljs.scss:after {
|
||||
content: 'SCSS';
|
||||
}
|
||||
<style lang="scss">
|
||||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.code-block {
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-class,
|
||||
|
|
@ -98,10 +133,26 @@
|
|||
|
||||
<script>
|
||||
import highlight from 'highlight.js/lib/highlight.js';
|
||||
import highlightSCSS from 'highlight.js/lib/languages/scss';
|
||||
import highlightXML from 'highlight.js/lib/languages/xml';
|
||||
import highlightJS from 'highlight.js/lib/languages/javascript';
|
||||
import Clipboard from 'clipboard';
|
||||
|
||||
highlight.registerLanguage('scss', highlightSCSS);
|
||||
highlight.registerLanguage('xml', highlightXML);
|
||||
highlight.registerLanguage('javascript', highlightJS);
|
||||
|
||||
export default {
|
||||
props: ['lang'],
|
||||
mounted() {
|
||||
const clipboard = new Clipboard(this.$refs.copy.$el, {
|
||||
target: () => this.$refs.block
|
||||
});
|
||||
|
||||
clipboard.on('success', (e) => {
|
||||
|
||||
});
|
||||
|
||||
highlight.highlightBlock(this.$refs.block);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
/* Third Party */
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import highlight from 'highlight.js/lib/highlight.js';
|
||||
import highlightSCSS from 'highlight.js/lib/languages/scss';
|
||||
import highlightXML from 'highlight.js/lib/languages/xml';
|
||||
import highlightJS from 'highlight.js/lib/languages/javascript';
|
||||
|
||||
highlight.registerLanguage('scss', highlightSCSS);
|
||||
highlight.registerLanguage('xml', highlightXML);
|
||||
highlight.registerLanguage('javascript', highlightJS);
|
||||
|
||||
/* Configs */
|
||||
import './config.js';
|
||||
|
|
|
|||
|
|
@ -107,7 +107,62 @@
|
|||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dicta maxime quibusdam voluptas. Eum atque sint, voluptates illo maxime nihil quisquam quae, et quia qui aut, suscipit deserunt corporis cupiditate?</p>
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-menu md-size="4" md-direction="bottom left">
|
||||
<md-button class="md-icon-button" md-menu-trigger>
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-menu-content>
|
||||
<md-menu-item>
|
||||
<span>Call</span>
|
||||
<md-icon>phone</md-icon>
|
||||
</md-menu-item>
|
||||
|
||||
<md-menu-item>
|
||||
<span>Send a message</span>
|
||||
<md-icon>message</md-icon>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"autosize": "^3.0.18",
|
||||
"clipboard": "^1.5.15",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"scopedQuerySelectorShim": "lazd/scopedQuerySelectorShim",
|
||||
"vue": "^2.1.0"
|
||||
|
|
|
|||
26
yarn.lock
26
yarn.lock
|
|
@ -1101,6 +1101,14 @@ cli-width@^2.0.0:
|
|||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
|
||||
|
||||
clipboard:
|
||||
version "1.5.15"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.5.15.tgz#6f24bf58a89b5a3fc1070dabdeaeaebb68382cee"
|
||||
dependencies:
|
||||
good-listener "^1.2.0"
|
||||
select "^1.0.6"
|
||||
tiny-emitter "^1.0.0"
|
||||
|
||||
cliui@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
|
||||
|
|
@ -1473,6 +1481,10 @@ delayed-stream@~1.0.0:
|
|||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
|
||||
|
||||
delegate@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.0.tgz#30c5c9ddbab0547e527dbbbb89d1495ab4cddc93"
|
||||
|
||||
delegates@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
|
||||
|
|
@ -2151,6 +2163,12 @@ globule@^1.0.0:
|
|||
lodash "~4.16.4"
|
||||
minimatch "~3.0.2"
|
||||
|
||||
good-listener@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.0.tgz#c473e31ba8c12cf82b6137cd867565beab5ba053"
|
||||
dependencies:
|
||||
delegate "^3.1.0"
|
||||
|
||||
graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
|
||||
version "4.1.11"
|
||||
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
|
||||
|
|
@ -4100,6 +4118,10 @@ scopedQuerySelectorShim@lazd/scopedQuerySelectorShim:
|
|||
version "0.0.0"
|
||||
resolved "https://codeload.github.com/lazd/scopedQuerySelectorShim/tar.gz/0ef4855a7944207510cdc0375a43956b2fc18410"
|
||||
|
||||
select@^1.0.6:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/select/-/select-1.1.0.tgz#a6c520cd9ab919ad81c7d1a273e0452f504dd7a2"
|
||||
|
||||
semver@~5.3.0, "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5":
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
|
||||
|
|
@ -4392,6 +4414,10 @@ timers-browserify@^1.0.1:
|
|||
dependencies:
|
||||
process "~0.11.0"
|
||||
|
||||
tiny-emitter@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.1.0.tgz#ab405a21ffed814a76c19739648093d70654fecb"
|
||||
|
||||
title-case@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.0.tgz#c68ccb4232079ded64f94b91b4941ade91391979"
|
||||
|
|
|
|||
Loading…
Reference in a new issue