Forms

JavaScript Editor

semantic HTML

JavaScript 키워드, 문자열, 숫자, 주석 하이라이트를 제공하는 경량 모듈 에디터입니다.

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

JavaScript 모드를 표시하고 Ctrl+/ 주석 토글과 폼 제출 값을 지원합니다.

Server template guidance

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