feat: code copying and guide for alternative syntax highlighting methods

README.md

@@ -112,6 +112,26 @@ To automatically output the text version when visiting the site via `curl`, you
     /blog/${1}.txt
    ```
 3. If you are using other web servers, you can use functions like `rewrite` or `redirect` by user agent (HTTP header) to achieve the same effect.
+### Alternative Syntax Highlighting
+Apart from the default shiki for highlighting, You can use [Prism](https://prismjs.com/) as code highlighting engine, see [Syntax Highlighting in Astro Docs](https://docs.astro.build/en/guides/syntax-highlighting/#add-a-prism-stylesheet) for details.
+
+To simply add features like code copying over the default Shiki formatter, you can simply import the `src/components/CodeScript.astro` to the Layout.
+
+You can also use [Expressive Code](https://expressive-code.com/) to get features like code copying over the syntax highlighting:
+> Warning: Expressive Code will load JavaScript by default. This will not follow your `noClientJavaScript` settings.
+
+1. Install Expressive Code:
+   ```shell
+   pnpm astro add astro-expressive-code
+   ```
+   You can answer all Yes to prompts as we will modify the config later.
+2. Edit `astro.config.mjs`:
+    ```diff
+    - integrations: [sitemap(), mdx(), partytown(), expressiveCode()],
+    + integrations: [sitemap(), expressiveCode(), mdx(), partytown()],
+    ```
+3. Create `ec.config.mjs` in the project root and adjust the config to your liking. To make things easier you can use [this config file used by the author](https://raw.githubusercontent.com/BlockG-ws/gb-lab/refs/heads/master/ec.config.mjs)
+
 ## 👀 Want to learn more?
 
 See the post [🕊](). I hope you like it. 💜

src/components/CodeScript.astro

@@ -0,0 +1,84 @@
+---
+// from https://www.jaluwibowo.id/blog/en/custom-syntax-highlight-and-copy-feature/
+---
+<script>
+function renderCodeLang(preBlock) {
+    const lang = preBlock.dataset.language;
+
+    if (lang !== 'plaintext') {
+        // add lang section on top left
+        const langSection = document.createElement("div");
+        langSection.className = "code-lang";
+        langSection.innerHTML = lang;
+
+        preBlock.prepend(langSection);
+    }
+}
+const copyImg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9 18q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Zm0-2h9V4H9v12Zm-4 6q-.825 0-1.413-.588T3 20V7q0-.425.288-.713T4 6q.425 0 .713.288T5 7v13h10q.425 0 .713.288T16 21q0 .425-.288.713T15 22H5Zm4-6V4v12Z"/></svg>`
+const checkMarkImg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m10.6 16.2l7.05-7.05l-1.4-1.4l-5.65 5.65l-2.85-2.85l-1.4 1.4l4.25 4.25ZM5 21q-.825 0-1.413-.588T3 19V5q0-.825.588-1.413T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.588 1.413T19 21H5Z"/></svg>`
+
+function renderCopyBtn(preBlock) {
+    const copyButton = document.createElement("button");
+
+    copyButton.className = "copy-code";
+    copyButton.setAttribute("aria-label", "Copy code to clipboard");
+    copyButton.setAttribute("title", "Copy code to clipboard");
+    copyButton.innerHTML = copyImg;
+
+    preBlock.appendChild(copyButton);
+
+    copyButton.addEventListener("click", async () => {
+        await copyCode(preBlock, copyButton);
+    });
+}
+async function copyCode(block, button) {
+    const code = block.querySelector("code");
+    const text = code?.innerText || "";
+
+    try {
+        await navigator.clipboard.writeText(text);
+
+        // Visual feedback that the task is completed
+        button.innerHTML = checkMarkImg;
+
+        setTimeout(() => {
+            button.innerHTML = copyImg;
+        }, 700);
+    } catch (error) {
+        console.error("Failed to copy code: ", error);
+    }
+}
+const preBlocks = Array.from(document.querySelectorAll("pre"));
+
+for (const preBlock of preBlocks) {
+    preBlock.style.position = "relative";
+
+    renderCodeLang(preBlock);
+    renderCopyBtn(preBlock);
+}
+</script>
+<style is:inline>
+    .code-lang {
+        position: absolute;
+        top: 0;
+        left: 85%;
+        color: #e5e9f0;
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+        border-radius: 0 0 0.25rem 0.25rem;
+    }
+
+    .copy-code {
+        border: none;
+        cursor: pointer;
+        outline: inherit;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background-color: rgba(67, 76, 94, 0.75);
+        color: #d8dee9;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+    }
+</style>