diff --git a/code/websites/pokedex.online/src/directives/highlight.js b/code/websites/pokedex.online/src/directives/highlight.js index a6f9517..4387978 100644 --- a/code/websites/pokedex.online/src/directives/highlight.js +++ b/code/websites/pokedex.online/src/directives/highlight.js @@ -64,7 +64,8 @@ function createHighlightObserver(el, theme) { export const vHighlight = { mounted(el, binding) { const config = binding.value || {}; - const theme = typeof config === 'string' ? config : (config.theme || 'github-dark'); + const theme = + typeof config === 'string' ? config : config.theme || 'github-dark'; // Store observer on element for cleanup el._highlightObserver = createHighlightObserver(el, theme); @@ -72,9 +73,15 @@ export const vHighlight = { updated(el, binding) { const newConfig = binding.value || {}; - const newTheme = typeof newConfig === 'string' ? newConfig : (newConfig.theme || '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'); + const oldTheme = + typeof oldConfig === 'string' + ? oldConfig + : oldConfig.theme || 'github-dark'; // If theme changed, re-highlight if (newTheme !== oldTheme && el.classList.contains('hljs')) { diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue index 2a016ee..ea4de7a 100644 --- a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue +++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue @@ -1109,6 +1109,23 @@ onMounted(() => { flex: 1; white-space: pre; overflow-x: auto; + background: transparent; +} + +.line pre code { + background: transparent; +} + +/* Light mode syntax highlighting */ +.content-viewer:not(.dark-mode) .line pre code { + background-color: transparent; + color: #24292e; +} + +/* Dark mode syntax highlighting */ +.content-viewer.dark-mode .line pre code { + background-color: transparent; + color: #e1e4e8; } .line-wrap .line pre {