msc-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.

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 mutated. Developers could get data througn event.detatil. | | msc-code-viewer-copy | Fired when copy button pressed. Developers could get data througn event.detatil. |

Reference

• <msc-code-viewer />