Code Viewer

PRO

A code documentation component that shows the rendered result alongside its source.

<sy-code-viewer>Installation guide Basic usage

Live preview

Interact with the component to see results here.

View code

HTML

<sy-code-viewer
  language="html"
  show-line-numbers
  show-copy-button
  collapsible
  default-expanded
  highlight-lines="1,4"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

Usage guide

A code documentation component showing a rendered result and source. It is not a code editor.

Preview and code

Put the UI in sy-code-render and code in sy-code-script to show both.

Display code only

Pass the source as escaped text. Code-only views remain expanded.

Highlighting and shared options: Configure display options on the parent and specify highlighted lines with highlightLines, such as 2,4-6.
Expansion state: defaultExpanded sets the initial state; expanded is the current state controlled by the app.

Examples

Live UI and code

Use sy-code-render together with sy-code-script.

View code

HTML

<sy-code-viewer language="html">
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

Code only

Insert code as text so it does not execute as HTML.

View code

HTML

<sy-code-viewer language="javascript" show-line-numbers>
  <sy-code-script>const project = { name: &quot;Syidax&quot;, active: true };

    function getName() {
    return project.name;
    }</sy-code-script>
</sy-code-viewer>

Highlight specific lines

Specify line numbers or ranges to highlight.

View code

HTML

<sy-code-viewer
  language="javascript"
  highlight-lines="1,3-5"
  show-line-numbers
>
  <sy-code-script>const project = { name: &quot;Syidax&quot;, active: true };

    function getName() {
    return project.name;
    }</sy-code-script>
</sy-code-viewer>

Start collapsed

Expand the source when needed.

View code

HTML

<sy-code-viewer
  language="html"
  default-expanded="false"
  trigger-label="View code"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

Height and line wrapping

Set scriptHeight to limit the height of long code sections.

View code

HTML

<sy-code-viewer
  language="javascript"
  script-height="100px"
  wrap
  show-line-numbers
>
  <sy-code-script>const project = { name: &quot;Syidax&quot;, active: true };

    function getName() {
    return project.name;
    }</sy-code-script>
</sy-code-viewer>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-code-viewer
  language="html"
  show-line-numbers
  show-copy-button
  collapsible
  default-expanded
  highlight-lines="1,4"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["expandedChanged", "languageChanged", "highlightLinesChanged", "ready",
      "childrenChanged", "copied", "codeChanged", "lineClick"
    ]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Control expansion directly

Use expanded to control the current expansion state. defaultExpanded sets the initial state; expanded sets the current state.

View code

HTML

<sy-code-viewer
  language="html"
  show-line-numbers
  show-copy-button
  collapsible
  default-expanded
  highlight-lines="1,4"
  id="supplement-1"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "expanded": false,
    "collapsible": true
  });
</script>

Minimal code display

Display code without line numbers or the copy control.

View code

HTML

<sy-code-viewer
  language="html"
  show-copy-button="false"
  collapsible
  default-expanded
  highlight-lines="1,4"
  id="supplement-1"
>
  <sy-code-render>
    <sy-button variant="primary">Save</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "showLineNumbers": false,
    "showCopyButton": false
  });
</script>

Feature examples

Choose a feature from 18 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.