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

<!DOCTYPE html> <title>Title</title> <style>body {width: 500px;}</style> <script type="application/javascript"> function $init() {return true;} </script> <body> <p checked class="title" id='title'>Title</p> <!-- here goes the rest of the page --> </body>

CSS

@font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); } body, .usertext { color: #F0F0F0; background: #600; font-family: Chunkfive, sans; --heading-1: 30px/32px Helvetica, sans-serif; } @import url(print.css); @media print { a[href^=http]::after { content: attr(href) } }

JavaScript

function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ` class="${cls}"`; } catch (e) { /* handle exception */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) console.log('undefined'); } return ( <div> <web-component>{block}</web-component> </div> ) } export $initHighlight;

JSON

[ { "title": "apples", "count": [12000, 20000], "description": {"text": "...", "sensitive": false} }, { "title": "oranges", "count": [17500, null], "description": {"text": "...", "sensitive": false} } ]

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

<script type="module" src="https://your-domain/wc-msc-code-viewer.js"> </script>

Structure

Put the content inside <msc-code-viewer /> as its child. It will have highlighting content.

<msc-code-viewer> <!-- Syntax highlighting content --> <style> body, .usertext { color: #F0F0F0; background: #600; font-family: Chunkfive, sans; --heading-1: 30px/32px Helvetica, sans-serif; } </style> </msc-code-viewer>

JavaScript Instantiation

<msc-code-viewer /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscCodeViewer } from 'https://your-domain/wc-msc-code-viewer.js'; // use DOM api const nodeA = document.createElement('msc-code-viewer'); document.body.appendChild(nodeA); nodeA.textContent = `

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.

<style> msc-code-viewer { --msc-code-viewer-border-radius: 16px; } </style>

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.

Reference