Forms

Code Editor

semantic HTML

라인 번호, Tab 입력, 주석 토글, 언어별 구문 하이라이트를 제공하는 경량 코드 편집기입니다.

stablefreeSince 0.5

Live example

javascript editor ready

<section class="static-editor code-editor" data-static-editor="code" data-language="javascript" data-default-value="function greet(name) {
  const message = `Hello, ${name}`;
  return message;
}"><div class="editor-toolbar" role="toolbar" aria-label="javascript editor tools"><label>Language<select data-editor-language><option value="text">Text</option><option value="sql">SQL</option><option value="python">Python</option><option value="javascript" selected>JavaScript</option></select></label><button type="button" data-editor-action="comment">Comment</button><button type="button" data-editor-action="copy">Copy</button><button type="button" data-editor-action="reset">Reset</button></div><div class="code-editor-body"><pre class="editor-gutter" aria-hidden="true" data-editor-gutter>1</pre><div class="code-editor-surface"><pre class="editor-highlight" aria-hidden="true" data-editor-highlight></pre><textarea rows="8" spellcheck="false" wrap="off" aria-label="javascript source" data-editor-input>function greet(name) {
  const message = `Hello, ${name}`;
  return message;
}</textarea></div></div><output class="editor-status" data-editor-status aria-live="polite">javascript editor ready</output></section>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.5`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

실제 입력은 native textarea이며 label 또는 aria-label을 제공합니다. 라인 번호는 장식 정보로 숨겨집니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->