N
Nuxt2mo ago
TokyoStarz

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
TokyoStarz2mo 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