CodeViewer — Public Interface

Slots

• (default) title slot
  Content placed directly inside <code-viewer> renders as the title (clickable).

  <code-viewer>Optional Title</code-viewer>

• slot="code"
  Code/content to display. Accepts text nodes, <template>, <pre>, or <code>.

  <code-viewer>
    Title
    <template slot="code">
      // code here (will render as literal text in non-Prism mode)
    </template>
  </code-viewer>

Attributes

Visuals (component & code colors)

• bg-color — component background (maps to --component-bg).
• title-bg-color — title bar background (maps to --title-bg).
• background-color — code area background (maps to --code-bg), default #333.
• color — code foreground (maps to --code-fg), default #eee.

Sizing & Typography

• width — width of the visible code box (e.g., 50ch, 28rem, 520px).
• height — height of the visible code box; defaults to auto.
• overflow-x — horizontal overflow policy; default auto.
• font-family — font family applied to visible element(s).
• font-size — font size applied to visible element(s).
• code-padding — padding inside code box; default 0.75rem 1rem.

Highlighting (Prism Integration)

• highlight — set to "prism" to use slotted <pre><code> with Prism highlighting.
• language — language ID (e.g., javascript, cpp); adds language-* classes to <pre> and <code>.

Convenience Transforms

• trim — removes one leading and trailing blank line from content.
• normalize-indent — removes smallest common leading indent across non-empty lines.

Behaviors & Interaction

• Render paths:
  • Default (non-Prism): gathers slotted nodes and writes literal text into internal <pre>.
  • Prism mode: ensures <pre><code> structure, applies trim/normalize-indent, language classes, and triggers Prism.highlightElement().
• Width stepping: click body to widen (+40px); click title to narrow (−40px); minimum width 240px.
• Box harmonization: normalizes padding, margins, and layout for visible code element and inner <code>.
• Overflow behavior: non-Prism uses overflow-y: auto; Prism applies overflow-x to visible element.

Parts (for theming)

• part="component" — main framed box.
• part="title" — title row.

Custom Properties (CSS Variables)

• --wrapper-bg — wrapper background.
• --component-bg — set via bg-color.
• --title-bg — set via title-bg-color.
• --code-bg — set via background-color.
• --code-fg — set via color.
• --code-width, --code-height, --code-overflow-x — sync with attributes in non-Prism mode.

Events

No public events. Internal handlers respond to slotchange and click events but no custom events are emitted.

Usage Examples

1) Plain (non-Prism) Viewer

<code-viewer width="50ch" height="18rem" trim normalize-indent 
  font-family="JetBrains Mono" font-size="0.95rem">
  HTML Example
  <template slot="code">
    <div class="note">This appears as literal text, not rendered HTML.</div>
  </template>
</code-viewer>

2) Prism Highlighted Viewer

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

<code-viewer highlight="prism" language="javascript" width="52ch" 
  overflow-x="auto" code-padding="0.5rem 0.75rem" trim normalize-indent>
  JS Snippet
  <pre slot="code"><code>
// Your code here...
function hello(name) {
  console.log(`Hello, ${name}`);
}
  </code></pre>
</code-viewer>

3) Interactive Width Stepping

• Click inside code box: width increases by 40px.
• Click title bar: width decreases by 40px.
• Minimum width: 240px.
• Changing modes (e.g., toggling Prism) resets width baseline.

Notes & Limits

• In non-Prism mode, slotted code is serialized as text — ideal for showing markup.
• In Prism mode, ensure valid <pre><code> structure and that language definitions are loaded.
• No keyboard or ARIA roles by default; add externally if needed for accessibility.