Something went wrong. Try again.
My theme for forester (+plugins)
Something went wrong. Try again.
forest-theme shikiblock.js
2.0 kB · 67 lines
JavaScript
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768import { createHighlighter } from 'https://esm.sh/shiki@3';import oneLight from 'https://esm.sh/shiki@3/themes/one-light.mjs';
let highlighterPromise = null;let highlighterInstance = null;
class ShikiBlock extends HTMLElement { constructor() { super(); this.language_name = this.getAttribute("language") || "javascript"; }
async loadHighlighter(rootPath, languages) { const grammar = await fetch(`${rootPath}/langs/Isabelle.tmLanguage.json`).then(r => r.json()); const highlighter = await createHighlighter({ themes: [oneLight], langs: languages }); await highlighter.loadLanguage(grammar); return highlighter; }
connectedCallback() { // Try highlighting now this._attemptHighlight();
// Observe text changes in case content is inserted later this._mo = new MutationObserver(() => this._attemptHighlight()); this._mo.observe(this, { childList: true, subtree: true, characterData: true }); }
disconnectedCallback() { if (this._mo) this._mo.disconnect(); }
async _attemptHighlight() { const source_code = this.textContent.trim(); if (!source_code) return; // nothing to highlight yet
// Stop observing once we have text if (this._mo) { this._mo.disconnect(); this._mo = null; }
// Initialize singleton highlighter if (!highlighterPromise) { const languagesAttr = this.getAttribute("load-languages") || ""; const languages = languagesAttr.split(",").map(s => s.trim()); const rootPath = this.getAttribute("root-path") || "."; highlighterPromise = this.loadHighlighter(rootPath, languages) .then(h => { highlighterInstance = h; return h; }); }
const highlighter = await highlighterPromise;
this.innerHTML = await highlighter.codeToHtml(source_code, { lang: this.language_name, theme: 'one-light' }); }}
customElements.define("shiki-block", ShikiBlock);