fix: resolve Prism syntax highlighting error in peer config modal

The PeerViewModal and InterfaceViewModal components displayed:
  Error: The language "undefined" has no grammar.

Root cause: vue-prism-component bundles its own instance of prismjs
(separate from the one imported elsewhere), so registering the ini
grammar on a different Prism instance had no effect on the one
actually performing the highlighting.

Fix: bypass vue-prism-component entirely. Import a single Prism
instance via a new helper (frontend/src/helpers/prism-setup.js) that
also registers the ini grammar, then render highlighted HTML directly
with <pre><code v-html="highlightedConfig">. This ensures the same
Prism object that owns the ini grammar is the one calling highlight().

Affected files:
- frontend/src/helpers/prism-setup.js (new): imports prismjs, defines
  the ini grammar on the Prism instance, re-exports it
- frontend/src/components/PeerViewModal.vue: replaces <Prism> with
  v-html using the shared Prism instance
- frontend/src/components/InterfaceViewModal.vue: same replacement
- frontend/src/main.js: removes the now-unused prism-setup import

Fixes #726
This commit is contained in:
Rene Luria
2026-07-10 17:49:36 +02:00
parent c800e7dd34
commit 8d1155224d
4 changed files with 59 additions and 6 deletions

View File

@@ -0,0 +1,39 @@
import Prism from 'prismjs'
Prism.languages.ini = {
comment: {
pattern: /(^[ \f\t\v]*)[#;][^\n\r]*/m,
lookbehind: true
},
section: {
pattern: /(^[ \f\t\v]*)\[[^\n\r\]]*\]?/m,
lookbehind: true,
inside: {
'section-name': {
pattern: /(^\[[ \f\t\v]*)[^ \f\t\v\]]+(?:[ \f\t\v]+[^ \f\t\v\]]+)*/,
lookbehind: true,
alias: 'selector'
},
punctuation: /\[|\]/
}
},
key: {
pattern: /(^[ \f\t\v]*)[^ \f\n\r\t\v=]+(?:[ \f\t\v]+[^ \f\n\r\t\v=]+)*(?=[ \f\t\v]*=)/m,
lookbehind: true,
alias: 'attr-name'
},
value: {
pattern: /(=[ \f\t\v]*)[^ \f\n\r\t\v]+(?:[ \f\t\v]+[^ \f\n\r\t\v]+)*/,
lookbehind: true,
alias: 'attr-value',
inside: {
'inner-value': {
pattern: /^("|').+(?=\1$)/,
lookbehind: true
}
}
},
punctuation: /=/
}
export default Prism