fragginwagon/memory-infrastructure-palace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Enhance highlight directive to support extended configuration and improve theme handling

Browse Source
This commit is contained in:
Greg Jacobs
2026-01-28 20:03:58 +00:00
parent 300246397d
commit 9f18a7b3be
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
code/websites/pokedex.online/src/directives/highlight.js
View File

@@ -23,6 +23,8 @@ function applyHighlight(el, theme = 'github-dark') {
try { try {
hljs.highlightElement(el); hljs.highlightElement(el);
// Remove any existing theme classes
el.className = el.className.replace(/hljs-theme-\w+/, '');
el.classList.add(`hljs-theme-${theme}`); el.classList.add(`hljs-theme-${theme}`);
} catch (error) { } catch (error) {
console.error('Highlight.js error:', error); console.error('Highlight.js error:', error);
@@ -57,19 +59,22 @@ function createHighlightObserver(el, theme) {
/** /**
* v-highlight directive * v-highlight directive
* Usage: <code class="language-json" v-highlight="theme">...</code> * Usage: <code v-highlight="{ theme: 'github', language: 'json' }">...</code>
*/ */
export const vHighlight = { export const vHighlight = {
mounted(el, binding) { mounted(el, binding) {
const theme = binding.value || 'github-dark'; const config = binding.value || {};
const theme = typeof config === 'string' ? config : (config.theme || 'github-dark');
// Store observer on element for cleanup // Store observer on element for cleanup
el._highlightObserver = createHighlightObserver(el, theme); el._highlightObserver = createHighlightObserver(el, theme);
}, },
updated(el, binding) { updated(el, binding) {
const newTheme = binding.value || 'github-dark'; const newConfig = binding.value || {};
const oldTheme = binding.oldValue || 'github-dark'; const newTheme = typeof newConfig === 'string' ? newConfig : (newConfig.theme || 'github-dark');
const oldConfig = binding.oldValue || {};
const oldTheme = typeof oldConfig === 'string' ? oldConfig : (oldConfig.theme || 'github-dark');
// If theme changed, re-highlight // If theme changed, re-highlight
if (newTheme !== oldTheme && el.classList.contains('hljs')) { if (newTheme !== oldTheme && el.classList.contains('hljs')) {