Code Viewer

PRO

실행 결과와 적용 코드를 함께 보여주는 코드 문서 컴포넌트입니다.

<sy-code-viewer>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

코드 보기

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">저장</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

사용 가이드

실행 결과와 소스를 보여주는 코드 문서용 컴포넌트입니다. 코드를 편집하는 에디터는 아닙니다.

미리보기와 코드

sy-code-render에 UI를, sy-code-script에 코드를 넣어 함께 보여줍니다.

코드만 표시

소스를 이스케이프한 텍스트로 전달하세요. 코드 전용 화면은 항상 펼쳐집니다.

강조와 공통 옵션: 부모에서 표시 옵션을 설정하고 highlightLines에 2,4-6처럼 강조할 줄을 지정합니다.
펼침 상태: defaultExpanded는 초기 상태, expanded는 앱에서 제어할 현재 상태입니다.

예제

실제 UI와 코드

sy-code-render와 sy-code-script를 함께 사용합니다.

코드 보기

HTML

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

코드 전용

코드는 HTML로 실행되지 않게 텍스트로 넣습니다.

코드 보기

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>

특정 행 강조

강조할 행 번호 또는 범위를 지정합니다.

코드 보기

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>

접힌 상태에서 시작

필요할 때 소스를 펼쳐 볼 수 있습니다.

코드 보기

HTML

<sy-code-viewer
  language="html"
  default-expanded="false"
  trigger-label="코드 보기"
>
  <sy-code-render>
    <sy-button variant="primary">저장</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>

높이와 줄바꿈

scriptHeight를 지정해 긴 코드 영역을 제한합니다.

코드 보기

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>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

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">저장</sy-button>
  </sy-code-render>
  <sy-code-script></sy-code-script>
</sy-code-viewer>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</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;
  }) ?? '완료';
  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>

펼침 상태 직접 제어

expanded로 현재 펼침 상태를 제어합니다. defaultExpanded는 초기 상태, expanded는 현재 상태를 설정할 때 사용합니다.

코드 보기

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">저장</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>

간결한 코드 표시

줄 번호와 복사 버튼 없이 코드를 표시합니다.

코드 보기

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">저장</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>

기능별 예제

18개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.