[Solved] QMardown extendPrism syntax highlighting add more languages



  • 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 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.



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


Log in to reply