class CodeSnippet extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['language', 'filename', 'code'];
}
connectedCallback() {
this.render();
}
highlightSyntax(code) {
// Simple syntax highlighting
return code
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/(".*?")/g, '$1')
.replace(/('.*?')/g, '$1')
.replace(/\b(def|class|import|from|if|else|elif|for|while|return|yield|try|except|finally|with|as|pass|break|continue|lambda|None|True|False)\b/g, '$1')
.replace(/\b(\d+\.?\d*)\b/g, '$1')
.replace(/(#.*$)/gm, '')
.replace(/\b([A-Z][a-zA-Z0-9_]*)\b/g, '$1')
.replace(/\b([a-z_][a-zA-Z0-9_]*)(?=\()/g, '$1');
}
render() {
const language = this.getAttribute('language') || 'python';
const filename = this.getAttribute('filename') || 'code.py';
const rawCode = this.getAttribute('code') || '';
const highlightedCode = this.highlightSyntax(rawCode);
this.shadowRoot.innerHTML = `
`;
// Copy functionality
const copyBtn = this.shadowRoot.getElementById('copyBtn');
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(rawCode).then(() => {
copyBtn.classList.add('copied');
copyBtn.innerHTML = `
Copied!
`;
setTimeout(() => {
copyBtn.classList.remove('copied');
copyBtn.innerHTML = `