83 lines
2.1 KiB
Vue
83 lines
2.1 KiB
Vue
<template>
|
|
<div class="code-snippet-container">
|
|
<div class="button-container h-8 w-8 p-0 inline-flex items-center justify-center">
|
|
<!-- Button to copy code to clipboard -->
|
|
<Button icon="pi pi-copy" @click="copyToClipboard" class="p-mt-2" />
|
|
</div>
|
|
<!-- Code display area with syntax highlighting -->
|
|
<pre v-html="highlightedCode"></pre>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import Button from 'primevue/button';
|
|
import Toast from 'primevue/toast';
|
|
import { useToast } from 'primevue/usetoast';
|
|
|
|
import Prism from 'prismjs';
|
|
import 'prismjs/components/prism-javascript'; // Import necessary languages
|
|
import 'prismjs/components/prism-systemd'; // Import necessary languages
|
|
import 'prismjs/themes/prism-tomorrow.css'; // Import a theme for syntax highlighting
|
|
|
|
const toast = useToast();
|
|
|
|
// Define the code snippet as a prop
|
|
const props = defineProps({
|
|
code: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
language: {
|
|
type: String,
|
|
default: 'systemd'
|
|
}
|
|
});
|
|
|
|
const highlightedCode = computed(() => {
|
|
return Prism.highlight(props.code, Prism.languages[props.language], props.language);
|
|
});
|
|
|
|
// Function to copy the code to the clipboard
|
|
function copyToClipboard() {
|
|
navigator.clipboard.writeText(props.code).then(() => {
|
|
toast.add({ severity: 'success', summary: 'Success', detail: 'Code copied to clipboard!', life: 10000 });
|
|
}).catch((error) => {
|
|
console.error('Failed to copy code:', error);
|
|
toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to copy code.', life: 10000 });
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.code-snippet-container {
|
|
position: relative; /* Enable positioning of child elements */
|
|
}
|
|
|
|
.class="button-container" {
|
|
position: sticky;
|
|
top: 10px; /* Adjust as needed */
|
|
right: 10px; /* Adjust as needed */
|
|
z-index: 1000;
|
|
}
|
|
|
|
pre {
|
|
background-color: #2d2d2d;
|
|
color: #ccc;
|
|
padding: 1em;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.button-container {
|
|
position: absolute;
|
|
top: 10px; /* Adjust as needed */
|
|
right: 10px; /* Adjust as needed */
|
|
}
|
|
|
|
.p-mt-2 {
|
|
margin-top: 1em;
|
|
}
|
|
</style>
|