c87cdf25c5
Bumps [highlight.js](https://github.com/highlightjs/highlight.js) from 9.18.5 to 10.4.1. - [Release notes](https://github.com/highlightjs/highlight.js/releases) - [Changelog](https://github.com/highlightjs/highlight.js/blob/master/CHANGES.md) - [Commits](https://github.com/highlightjs/highlight.js/compare/9.18.5...10.4.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
46 lines
874 B
Vue
46 lines
874 B
Vue
<template>
|
|
<div class="code--container">
|
|
<button class="button small button--copy-code" @click="onCopy">
|
|
{{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
|
|
</button>
|
|
<highlightjs :language="lang" :code="script" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import 'highlight.js/styles/default.css';
|
|
import copy from 'copy-text-to-clipboard';
|
|
|
|
export default {
|
|
props: {
|
|
script: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
lang: {
|
|
type: String,
|
|
default: 'javascript',
|
|
},
|
|
},
|
|
methods: {
|
|
onCopy(e) {
|
|
e.preventDefault();
|
|
copy(this.script);
|
|
bus.$emit('newToastMessage', this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.code--container {
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
.button--copy-code {
|
|
margin-top: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
</style>
|