[Solved] QMardown extendPrism syntax highlighting add more languages

danielcommesse

Hi quasarians!,

I’m using the QMarkdown component. It supports syntax highlighting, but just comes with a few languages by default. I am trying to add more languages without success.

According to the official docs, you can extend Prism (the syntax highlighting library) like this:

<q-markdown :extendPrism="extendPrism" />
methods: {
  // to extend Prism
  extendPrism (Prism) {
    // this uses the 'autoloader' plugin
    // https://prismjs.com/plugins/autoloader/
    Prism.plugins.autoloader.languages_path = 'path/to/grammars/'
  }
}

However I’m getting the error:

[Vue warn]: Error in render: "TypeError: Cannot set property 'languages_path' of undefined"

This is the Prism object in the console:

{Prism: {…}}
Prism:
Token: ƒ Token(type, content, alias, matchedStr, greedy)
disableWorkerMessageHandler: undefined
fileHighlight: ƒ (container)
filename: "http://localhost:8085/22.js"
highlight: ƒ (text, grammar, language)
highlightAll: ƒ (async, callback)
highlightAllUnder: ƒ (container, async, callback)
highlightElement: ƒ (element, async, callback)
hooks: {all: {…}, add: ƒ, run: ƒ}
languages: {markup: {…}, xml: {…}, extend: ƒ, insertBefore: ƒ, DFS: ƒ, …}
manual: undefined
matchGrammar: ƒ (text, strarr, grammar, index, startPos, oneshot, target)
plugins: {}
tokenize: ƒ (text, grammar)
util: {encode: ƒ, type: ƒ, objId: ƒ, clone: ƒ, getLanguage: ƒ, …}
__proto__: Object
__proto__: Object

I’ve noticed the plugins property is empty.

Any help?

Thanks in advance!

Hawkeye64

@danielcoliev This may help: https://prismjs.com/extending.html#writing-plugins

danielcommesse

@Hawkeye64 I actually got it to work, don’t know if it’s the best solution (probably not), but seems to work just fine:

I cloned the prism repo.
made a folder in my project prism
copied ONLY the file components/prism-markup-templating.min.js (does not work without this file), and then imported it in my project before the export default.
Then did the same for every language that I wanted to use (just like 5 in my case and 6 files copied in total).
Example:

import('@/prismjs/components/prism-markup-templating.min.js')
import('@/prismjs/components/prism-php.min.js')
import('@/prismjs/components/prism-python.min.js')

Hope it helps someone else. Or better, maybe someone else has a better solution/implementation.
I will mark this as solved for the moment.

Hawkeye64

I also think that prism attaches itself globally to the window (so, window.Prism) and you can modify it at start up

No More Posting New Topics!

[Solved] QMardown extendPrism syntax highlighting add more languages