Nuxt•4mo ago

Need help ignoring shiki highlight hints in a copy button

In Nuxt content, you can use Shiki to highlight code blocks, and you can highlight these blocks with nice inlay hints, for example, if I have some javascript code, for example:

const a = 1 + 2;
console.log(a);

const a = 1 + 2;
console.log(a);

and I wanted to highlight the console.log line, I can do this:

const a = 1 + 2;
console.log(a) // [!code hl]

const a = 1 + 2;
console.log(a) // [!code hl]

but if I make a ProseCode component, and add a copy button that uses vue use to copy the string passed through the "code" prop, I get the inlay hint in the copied code. How can I avoid getting the inlay hints without either using regex or ignoring all coments?

1 Reply

TokyoStarz•4mo ago

this is my current hack:

import { useClipboard } from '@vueuse/core';
const { copy, copied } = useClipboard();
const props = withDefaults(
    defineProps<{
        code?: string;
        language?: string | null;
        filename?: string | null;
        highlights?: Array<number>;
    }>(),
    { code: '', language: null, filename: null, highlights: [] }
);

const codeElm = ref();

const copyCode = () => {
    if (!codeElm.value) {
        return;
    }

    let str = "";
    let lines = codeElm.value.getElementsByClassName("line");
    for (let i = 0; i < lines.length; i++) {
        let line = lines[i]
        str += line.textContent
        if (!str.endsWith("\n") && i != lines.length - 1) {
            str += "\n"
        }
    }

    copy(str);
};

import { useClipboard } from '@vueuse/core';
const { copy, copied } = useClipboard();
const props = withDefaults(
    defineProps<{
        code?: string;
        language?: string | null;
        filename?: string | null;
        highlights?: Array<number>;
    }>(),
    { code: '', language: null, filename: null, highlights: [] }
);

const codeElm = ref();

const copyCode = () => {
    if (!codeElm.value) {
        return;
    }

    let str = "";
    let lines = codeElm.value.getElementsByClassName("line");
    for (let i = 0; i < lines.length; i++) {
        let line = lines[i]
        str += line.textContent
        if (!str.endsWith("\n") && i != lines.length - 1) {
            str += "\n"
        }
    }

    copy(str);
};

rather than just doing copy(props.code) or copy(code) in the template

Gaming

Programming

Need help ignoring shiki highlight hints in a copy button