I am attempting to use prismjs from a file I am importing into a web-component.
Here is the function which is supposed to return the prismjs highlighted code block
import Prism from 'prismjs';
function article() {
const code = `var data = 1`;
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript')
const pre = document.createElement('pre')
const _code = document.createElement('code')
_code.classList = 'language-js'
_code.innerHTML = html
pre.appendChild(_code)
return pre
}
and here is my web-component
export default class PostComponent extends HTMLElement {
constructor() {
super()
this.shadow = this.attachShadow({mode: 'open'})
this.styleSheet = document.createElement('style')
window.addEventListener('popstate', async (e) => {
const path = e.state;
const module = await GetArticle(path)
this.articleName = module.title()
this.canvasApp = module.canvasApp()
this.article = module.article()
this.shadow.replaceChildren(
this.styleSheet,
this.articleName,
this.canvasApp,
this.article
)
});
}
connectedCallback() {
this.RenderView();
}
RenderView() {
this.styleSheet.textContent = Style;
}
}
I am including the prism.min.css from index.html.
What gets ultimately rendered is an unhighlighted code element which is not what I am looking for. I have tried using Prism.highlightAll() in the article() function and the constructor but neither works.
You are adding the CSS to the global scope; but global CSS can not style shadowDOM
You need to load that CSS inside the shadowDOM.
You also do not want to load the <script src=".../prism.js"> in your HTML. It is a dependency of the Web Component. So the (JSWC) Web Component loads it when required
About that setTimeout
, see my blogpost:
Web Component developers do not connect with the connectedCallback (yet)
As alternative see: https://github.com/FIameCaster/prism-code-editor
<script>
customElements.define("prism-code", class extends HTMLElement {
connectedCallback() {
const createElement = (tag, props = {}, element = document.createElement(tag)) => {
if (props.append) { element.append(...props.append); delete props.append }
return Object.assign(element, props);
};
setTimeout(() => { // wait till lightDOM is parsed
new Promise((resolve, reject) => {
if (window.Prism) { resolve(); return }
document.head.append(
createElement("script", {
src: "https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js",
onload: resolve, onerror: reject,
})
);
}).then(() => {
this.attachShadow({ mode: "open" }).append(
createElement("style", {
textContent: `@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css');`,
}),
createElement("pre", {
append: [
createElement("code", {
className: `language-${this.getAttribute("language") || "javascript"}`,
textContent: this.textContent.trim(),
}),
],
})
); //append
Prism.highlightAllUnder(this.shadowRoot);
}); // then
}, 0); // setTimeout
} // connectedCallback
} // class
); // customElements.define
</script>
<prism-code>
// This is a sample JavaScript code
function helloWorld() {
console.log('Hello, world!');
}
helloWorld();
</prism-code>