Move all files and migrated it 🌪

components/utilities/CodeSnippet.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="relative overflow-hidden rounded">
+        <pre><code class="px-8 py-6 overflow-hidden overflow-x-scroll text-sm rounded-md">{{ code }}</code></pre>
+
+        <div class="absolute top-0 right-0">
+            <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:success="onCopy" v-clipboard:copy="code">
+                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+                    <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import hljs from 'highlight.js/lib/core';
+
+hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
+import 'highlight.js/styles/atom-one-dark.css';
+
+export default {
+    props: ['code'],
+    mounted() {
+        this.highlightCode();
+    },
+
+    methods: {
+        highlightCode() {
+            this.$nextTick(() => {
+                document.querySelectorAll('pre code').forEach((block) => {
+                    hljs.highlightBlock(block);
+                });
+            });
+        },
+
+        onCopy() {
+            this.$emit("onCopy");
+        }
+    },
+}
+</script>