syidaxdesign system
홈 가격 내 정보
ComponentsData display

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>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-code-viewer>

Properties

Attribute / PropertyTypeDefaultDescription
string'plaintext'소스 강조에 사용할 언어입니다.
booleanfalseShow line-number gutter.
booleantrueShow the copy-to-clipboard button at top-right of the source panel.
booleanfalse긴 코드 줄을 다음 줄로 감쌉니다.
string''Max-height of the script (code panel) section. Accepts any CSS length (`"320px"`, `"40vh"`, …). The live UI section and the collapse trigger are unaffected — only the code panel scrolls past this value. Renamed from the previous `maxHeight` to make the scope (script-only, not viewer-total) explicit at the call site.
string''Comma list of line numbers / ranges to emphasize. e.g. "3,5-7,12". 1-based.
booleanundefined소스 영역의 현재 펼침 상태를 외부에서 제어합니다.
booleantrue처음 표시할 때 소스 영역을 펼칩니다.
booleantrueWhen false, the trigger is hidden and the script section is forced expanded.
string'SOURCE'Text in the toggle bar.

Events

EventDetailDescription
CustomEvent<{ expanded: boolean; source: 'user' | 'prop' }>Fires whenever the viewer's expand state changes — by user click on the trigger or by the host updating the `expanded` prop. `source` distinguishes "user click" from "programmatic" for analytics consumers.
CustomEvent<{ language: string }>Fires when the `language` prop changes.
CustomEvent<{ raw: string; lines: number[] }>Fires when the `highlightLines` prop changes. Payload includes parsed line numbers.
CustomEvent<{ hasRender: boolean; hasScript: boolean }>Fires once after the viewer's first render is complete.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.

<sy-code-render>

Properties

Attribute / PropertyTypeDefaultDescription
string''Authored markup snapshot — captured at connectedCallback time before descendants hydrate. Read by paired `<sy-code-script>` to display the user's authored markup instead of the post-hydration runtime DOM. Mutable so the component can refresh it after user-driven mutations.

Events

EventDetailDescription
CustomEvent<{ html: string }>Fires whenever the snapshot is refreshed (initial connection or a user-driven mutation that reaches the host's own child list). Paired `<sy-code-script>` listens to this event to re-render the code panel.

<sy-code-script>

Events

EventDetailDescription
CustomEvent<{ code: string; language: string }>Fires after the rendered copy button writes the code to the clipboard successfully. (Past-tense name avoids the JS property collision with the `copy` method that other web standards reserve.)
CustomEvent<{ code: string; lineCount: number; language: string }>Fires whenever the resolved code changes.
CustomEvent<{ line: number }>Fires when a line number is clicked (when `showLineNumbers` on viewer).
Design SystemTab 이동 Enter 열기