WebDev Bites: ViewCode Component Interface

resizable code viewer with shadow DOM encapsulation

About Introduction Demo Design Interface
Figure 1. JS Example 
function greet(name) {
  return `Hello, ${name}!`;
}

const nums = [3, 1, 4, 1, 5];
nums.sort((a, b) => a - b);
console.log(nums);
 ViewCode is a W3C web component that displays code inside a shadow DOM with optional Prism.js syntax highlighting. It exposes attributes for sizing, colors, typography, and content transforms, and uses two slots for title and code content. Clicking the code panel widens the component by one step-px increment. Clicking the title narrows it by one step. Width is clamped to min-width.

1.0 - Use in Application

Place this in your page wherever you want a resizable code viewer: 
  <view-code width="50ch" highlight="prism" language="javascript"
    bg-color="var(--light)" title-bg-color="#ccc">
    Figure 1. Example
    <pre slot="code"><code class="language-javascript">
      // your code here
    </code></pre>
  </view-code>
The required script and stylesheet are: 

      <link rel="stylesheet" href="Components/ViewCodeComponent/css/ViewCode.css">
      <script src="Components/ViewCodeComponent/js/ViewCode.js" defer></script>
For Prism syntax highlighting, also load Prism before the component script: 

      <link rel="stylesheet" href="../css/prism.css">
      <script src="../js/prism.js"></script>

2.0 - ViewCode Interface

Interface surface What it does Example
bg-color (attribute) Background color of the view box. Accepts any CSS color value or custom property. 
<view-code bg-color="var(--light)"></view-code>
title-bg-color (attribute) Background color for the title bar. 
<view-code title-bg-color="#ccc"></view-code>
background-color (attribute) Background color of the code area (maps to --code-bg). Default: var(--light). 
<view-code background-color="#1e1e1e"></view-code>
color (attribute) Foreground (text) color of the code area (maps to --code-fg). Default: var(--dark). 
<view-code color="#d4d4d4"></view-code>
width (attribute) Initial width of the view box (any CSS length: ch, rem, px). Overridden by click-to-resize after the first click. 
<view-code width="50ch"></view-code>
height (attribute) Height of the code area. Defaults to auto (grows with content). 
<view-code height="20rem"></view-code>
overflow-x (attribute) Horizontal overflow policy for the code area. Default: auto. 
<view-code overflow-x="scroll"></view-code>
code-padding (attribute) Padding inside the code box. Default: 0.75rem 1rem. 
<view-code code-padding="0.5rem 0.75rem"></view-code>
font-family (attribute) Font family applied to the visible code element. 
<view-code font-family="JetBrains Mono"></view-code>
font-size (attribute) Font size applied to the visible code element and inner <code>. 
<view-code font-size="0.9rem"></view-code>
highlight (attribute) Set to "prism" to use Prism.js syntax highlighting. Requires a <pre slot="code"><code> structure in the light DOM. 
<view-code highlight="prism"></view-code>
language (attribute) Prism language ID (e.g., javascript, cpp, rust). Adds language-* classes to the slotted <pre> and <code>. 
<view-code highlight="prism" language="cpp"></view-code>
trim (attribute) Boolean. Removes one leading and one trailing blank line from code content. Works in both default and Prism modes. 
<view-code trim></view-code>
normalize-indent (attribute) Boolean. Strips the minimum common leading whitespace from all non-empty lines, removing page-level indentation. 
<view-code normalize-indent></view-code>
step-px (attribute) Pixels added or removed per click. Default: 40. 
<view-code step-px="60"></view-code>
min-width (attribute) Minimum view width in pixels when shrinking. Default: 240. 
<view-code min-width="300"></view-code>
Slot: (default) Caption text rendered in the title bar above the code. 
<view-code>
  Figure 1. My Code
</view-code>
Slot: code Code content. In default mode, accepts text nodes or <template>. In Prism mode, requires <pre><code class="language-*">. 
<view-code highlight="prism" language="rust">
  Title
  <pre slot="code">
    <code class="language-rust">
      fn main() {}
    </code>
  </pre>
</view-code>
Click code (behavior) Widens the view by step-px per click, measured from the width at first click. 
// user clicks code panel → width grows by step-px
Click title (behavior) Narrows the view by step-px per click, clamped to min-width. 
// user clicks title bar → width shrinks by step-px
CSS parts: view, title Exposed via part attribute for external styling with ::part(). 
view-code::part(title) {
  font-style: italic;
}
Events No custom events are dispatched. Width changes and rendering happen internally. 
// no custom events in current build