diff --git a/code/websites/pokedex.online/src/directives/highlight.js b/code/websites/pokedex.online/src/directives/highlight.js
index 1f3b80b..a6f9517 100644
--- a/code/websites/pokedex.online/src/directives/highlight.js
+++ b/code/websites/pokedex.online/src/directives/highlight.js
@@ -23,6 +23,8 @@ function applyHighlight(el, theme = 'github-dark') {
 
   try {
     hljs.highlightElement(el);
+    // Remove any existing theme classes
+    el.className = el.className.replace(/hljs-theme-\w+/, '');
     el.classList.add(`hljs-theme-${theme}`);
   } catch (error) {
     console.error('Highlight.js error:', error);
@@ -57,19 +59,22 @@ function createHighlightObserver(el, theme) {
 
 /**
  * v-highlight directive
- * Usage: <code class="language-json" v-highlight="theme">...</code>
+ * Usage: <code v-highlight="{ theme: 'github', language: 'json' }">...</code>
  */
 export const vHighlight = {
   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
     el._highlightObserver = createHighlightObserver(el, theme);
   },
 
   updated(el, binding) {
-    const newTheme = binding.value || 'github-dark';
-    const oldTheme = binding.oldValue || 'github-dark';
+    const newConfig = binding.value || {};
+    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 (newTheme !== oldTheme && el.classList.contains('hljs')) {