Display code language in code block, add code copy function

components/MsgContent.vue

@@ -1,26 +1,96 @@
 <script setup>
 import { marked } from "marked"
 import hljs from "highlight.js"
+import copy from 'copy-to-clipboard'
+
+// Part of the code comes from this project https://github.com/arronhunt/highlightjs-copy, thanks to the author's contribution
+
+hljs.addPlugin({
+  'after:highlightElement': ({ el, result, text }) => {
+    let header = el.parentElement.querySelector(".hljs-code-header");
+    if (header) {
+      header.remove();
+    }
+
+    header = Object.assign(document.createElement("div"), {
+      className: "hljs-code-header d-flex align-center justify-space-between bg-black pa-1",
+      innerHTML: `<div class="pl-2 text-caption">${result.language}</div>`
+    });
+
+    let copyButton = Object.assign(document.createElement("button"), {
+      innerHTML: "Copy",
+      className: "hljs-copy-button",
+    });
+    copyButton.dataset.copied = false;
+
+    header.append(copyButton);
+    //
+    el.parentElement.classList.add("d-flex","flex-column", "my-3");
+    el.parentElement.prepend(header);
+    copyButton.onclick = function () {
+      copy(text);
+
+      copyButton.innerHTML = "Copied!";
+      copyButton.dataset.copied = 'true';
+
+      setTimeout(() => {
+        copyButton.innerHTML = "Copy";
+        copyButton.dataset.copied = 'false';
+      }, 2000);
+    };
+  }
+});
 
 marked.setOptions({
-  highlight: function (code, lang) {
+  // highlight: function (code, lang) {
-    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+  //   const language = hljs.getLanguage(lang) ? lang : 'plaintext'
-    return hljs.highlight(code, { language }).value
+  //   return hljs.highlight(code, { language }).value
-  },
+  // },
   langPrefix: 'hljs language-', // highlight.js css class prefix
 })
 
 const props = defineProps(['content'])
-const contentHtml = computed(() => {
+
-  return props.content ? marked(props.content) : ''
+const contentHtml = ref('')
+
+const contentElm = ref(null)
+
+const highlightCode = () => {
+  contentElm.value.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightElement(block)
+  })
+}
+
+watchEffect(() => {
+  contentHtml.value = props.content ? marked(props.content) : ''
+  nextTick(() => {
+    highlightCode()
+  })
 })
 
 </script>
 
 <template>
   <div
+      ref="contentElm"
       v-html="contentHtml"
-      class="text-body-1 text-justify"
+      class="chat-msg-content text-justify"
   ></div>
+</template>
 
-</template>
+<style>
+.chat-msg-content ol {
+  list-style-position: inside;
+}
+.hljs-copy-button{
+  width:2rem;height:2rem;text-indent:-9999px;color:#fff;
+  border-radius:.25rem;border:1px solid #ffffff22;
+  background-image:url('data:image/svg+xml;utf-8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6V20C5 20.2652 5.10536 20.5196 5.29289 20.7071C5.48043 20.8946 5.73478 21 6 21H18C18.2652 21 18.5196 20.8946 18.7071 20.7071C18.8946 20.5196 19 20.2652 19 20V6C19 5.73478 18.8946 5.48043 18.7071 5.29289C18.5196 5.10536 18.2652 5 18 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V20C21 20.7957 20.6839 21.5587 20.1213 22.1213C19.5587 22.6839 18.7957 23 18 23H6C5.20435 23 4.44129 22.6839 3.87868 22.1213C3.31607 21.5587 3 20.7957 3 20V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H8C8.55228 3 9 3.44772 9 4C9 4.55228 8.55228 5 8 5H6Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3C7 1.89543 7.89543 1 9 1H15C16.1046 1 17 1.89543 17 3V5C17 6.10457 16.1046 7 15 7H9C7.89543 7 7 6.10457 7 5V3ZM15 3H9V5H15V3Z" fill="white"/></svg>');
+  background-repeat:no-repeat;background-position:center;
+  transition:background-color 200ms ease,transform 200ms ease-out
+}
+.hljs-copy-button:hover{border-color:#ffffff44}
+.hljs-copy-button:active{border-color:#ffffff66}
+.hljs-copy-button[data-copied="true"]{text-indent:0;width:auto;background-image:none}
+@media(prefers-reduced-motion){.hljs-copy-button{transition:none}}
+</style>

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
+    "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",
     "marked": "^4.2.12",

yarn.lock

@@ -1682,6 +1682,13 @@ cookie-es@^0.5.0:
   resolved "https://registry.npmmirror.com/cookie-es/-/cookie-es-0.5.0.tgz#a6ad89923e68c542fc9e760b07aefa5ab020d719"
   integrity sha512-RyZrFi6PNpBFbIaQjXDlFIhFVqV42QeKSZX1yQIl6ihImq6vcHNGMtqQ/QzY3RMPuYSkvsRwtnt5M9NeYxKt0g==
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmmirror.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -4224,6 +4231,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmmirror.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"