(function loadDeviconCSS() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/devicon.min.css';
document.head.appendChild(link);
})();
document.addEventListener('DOMContentLoaded', function() {
initLangTabs();
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'class' && mutation.target.nodeName === 'HTML') {
setTimeout(initLangTabs, 50);
}
});
});
observer.observe(document.documentElement, {
attributes: true
});
window.addEventListener('hashchange', function() {
setTimeout(initLangTabs, 100);
});
window.addEventListener('load', function() {
setTimeout(initLangTabs, 100);
});
});
function initLangTabs() {
const langTabsContainers = document.querySelectorAll('.langtabs');
langTabsContainers.forEach(function(container) {
const tabButtons = container.querySelectorAll('.langtabs-tab');
tabButtons.forEach(function(button) {
button.removeEventListener('click', handleTabClick);
button.addEventListener('click', handleTabClick);
});
if (!container.querySelector('.langtabs-tab.active')) {
const firstButton = tabButtons[0];
if (firstButton) {
firstButton.click();
}
}
});
}
function handleTabClick() {
const container = this.closest('.langtabs');
const lang = this.getAttribute('data-lang');
const tabButtons = container.querySelectorAll('.langtabs-tab');
const tabContents = container.querySelectorAll('.langtabs-code');
tabButtons.forEach(function(btn) {
btn.classList.remove('active');
});
tabContents.forEach(function(content) {
content.classList.remove('active');
});
this.classList.add('active');
const activeContent = container.querySelector(`.langtabs-code[data-lang="${lang}"]`);
if (activeContent) {
activeContent.classList.add('active');
}
}