Code Viewer
As a web developer, show some demo code is a very common stuff. There are so many syntax highlighting libraries for the Web.
highlight.js is one of the popular library.
It is easy to use and there are so many themes for it.
To make it more suitable for me, I wrap highlight.js
and GitHub light / dark themes as a web component and named it <msc-code-viewer />
.
With <msc-code-viewer />
syntax highlighting is a piece of cake. It will switch light / dark mode as user preference. Of course「COPY
」feature has already built-in.
Chceck the following syntax highlighting and see what can <msc-code-viewer />
do.
HTML
CSS
JavaScript
JSON
Basic Usage
<msc-code-viewer />
is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-code-viewer />
's html structure and everything will be all set.
Required Script
Structure
Put the content inside <msc-code-viewer />
as its child.
It will have highlighting content.
JavaScript Instantiation
<msc-code-viewer />
could also use JavaScript to create DOM element. Here comes some examples.
Show me the money
`; // new instance with Class const nodeB = new MscCodeViewer(); document.body.appendChild(nodeB); nodeB.textContent = `Show me the money
`; </script>Style Customization
<msc-code-viewer />
uses CSS variables to style its interface. That means developer could easy change them into the lookup you like.
Property
Property Name | Type | Description |
---|---|---|
value
|
String | Getter / Setter for value. Developers could use this property to setup syntax highlighting. |
Event
Event Signature | Description |
---|---|
msc-code-viewer-mutate
|
Fired when <msc-code-viewer-mutate /> mutated. |