Does Not Work Well With Webpack Applications #28
Description
This plugin does not work on webpack applications. After doing some testing and looking into the source code of this project, Prism themselves say that this is because you should not call loadLanguages() in a webpack application, and that a babel plugin should be used instead. That plugin seems to be integral to this plugin, and so I was getting the same errors using this plugin that I was when I was simply using Prism without the plugin, but attempting to use loadLanguages().
I am using this plugin on a node.js express application, and it renders server-side with no issues (no webpack). However, when I am building my vue.js app and need to add preview functionality, it does not work, probably because I am using webpack.
If there would be any way to fix it so others could avoid the trouble of having to manually add prism to markdown, that would be great.
I am including source code below that I am using that is based off of the official markdown-it docs using highlight-js here https://markdown-it.github.io/markdown-it/, but instead using Prismjs. I hope this helps anyone who is trying to accomplish what I was. This is the code I'll be using for now.
import markdownit from "markdown-it";
let md = markdownit({
highlight: (str, lang) => {
if (lang) {
let langObject = Prism.languages[lang]
try {
return (
`<pre class="language-${lang}"><code>` +
Prism.highlight(str, langObject, lang) +
'</code></pre>'
)
} catch (__) {}
}
return `<pre class="language-${lang}><code>` + md.utils.escapeHtml(str) + "</code></pre>"
}
});