Posts

Showing posts from December, 2020

Create a Scope limited Codeblock Web Component

Create a Scope limited Codeblock Web Component Table of Content Create a custom element Lazy loading the script Prism manual mode One way data flow and mutation observer Conclusion Known limitations Recently I started with a personal project portfolio website and one of the challenges I had is to allow code highlighting. There are tools like Prism.js, Highlight.js that does the job if my goal is only to have one theme shown at the same time. On the page that needs syntax highlighting, the design is to have two different themes applied for different sections on the same page. With Prism.js, there isn’t an out-of-box method loading two different theme stylesheet without style clashing. The problem could be abstracted to allow each loaded stylesheet has their own scope so they don’t affect each other when shown on the same page. There are a few key points in this challenge: Each theming stylesheet share exactly the same name space and selector names. We should avoid interce