Something went wrong. Try again.
Dedicated SSR (Server-side-rendered) Astro native Headless CMS, build from the ground up for the Astro community and by Astro community memb github.com/withstudiocms/studiocms
Something went wrong. Try again.
1.8 kB · 77 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778---import './code-component.css';
interface Props { code: string; ins?: string; del?: string;
__test_mode?: boolean;}
const { code, del, ins, __test_mode = false } = Astro.props;
const escapeHtml = (s: string) => s .replaceAll('&', '&') .replaceAll('<', '<') .replaceAll('>', '>') .replaceAll('"', '"') .replaceAll("'", ''');
const htmlCode = code .split('\n') .map((line) => `<span class="line">${escapeHtml(line)}</span>`) .join('\n');
const props: Record<string, string> = {};
/* v8 ignore start */if (del) { props['data-lines-deleted'] = del;}
if (ins) { props['data-lines-inserted'] = ins;}/* v8 ignore stop */
const id = __test_mode ? 'test-id' : Math.random().toString(36).substring(2, 9);---
<pre class="playground-code-container"><code id={id} class:list={["custom-code", (del || ins) ? 'diff' : '']} {...props} set:html={htmlCode} /></pre><script is:inline define:vars={{ id: id }}>
(function () { const codesWithDiff = document.getElementById(id);
if (!codesWithDiff) return;
const code = codesWithDiff.classList.contains("diff");
if (!code) return;
const linesInserted = codesWithDiff.getAttribute("data-lines-inserted"); const linesDeleted = codesWithDiff.getAttribute("data-lines-deleted");
if (!linesInserted && !linesDeleted) return;
const parsedInsertedLines = linesInserted?.split(",").map((line) => parseInt(line, 10)) || []; const parsedDeletedLines = linesDeleted?.split(",").map((line) => parseInt(line, 10)) || [];
const codeLines = codesWithDiff.querySelectorAll(".line");
codeLines.forEach((line, index) => { if (parsedInsertedLines.includes(index + 1)) { line.classList.add("diff", "ins"); }
if (parsedDeletedLines.includes(index + 1)) { line.classList.add("diff", "del"); } }); })();
</script>