{prev ? (
);
};
// ← Previous
{prev.label}
) : }
{next ? (
Next →
{next.label}
) : }
{`...`} — syntax-highlighted code block.
// Lazy-loads highlight.js (common bundle, ~50KB gz) on first mount.
// hljs token classes are themed via docs-kit.css to match the warm code palette.
const Code = ({ lang = 'python', children }) => {
const ref = React.useRef(null);
React.useEffect(() => {
let cancelled = false;
const apply = () => {
if (cancelled || !ref.current || !window.hljs) return;
// Strip any prior highlight (in case useEffect re-runs after children change).
ref.current.removeAttribute('data-highlighted');
ref.current.textContent = ref.current.textContent;
window.hljs.highlightElement(ref.current);
};
if (window.hljs) { apply(); return; }
if (!window.__hljsLoading) {
window.__hljsLoading = new Promise((resolve) => {
const s = document.createElement('script');
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js';
s.onload = () => resolve();
s.onerror = () => { console.warn('highlight.js failed to load'); resolve(); };
document.head.appendChild(s);
});
}
window.__hljsLoading.then(apply);
return () => { cancelled = true; };
}, [children, lang]);
return (
{children}
);
};
Object.assign(window, { DIcon, Pager, Code });