Forms
Python Editor
semantic HTMLPython 키워드, 문자열, 숫자, 주석 하이라이트를 제공하는 경량 스크립트 에디터입니다.
Live example
<section class="static-editor code-editor" data-static-editor="code" data-language="python" data-default-value="def greet(name):
return f"Hello, {name}""><div class="editor-toolbar" role="toolbar" aria-label="python editor tools"><label>Language<select data-editor-language><option value="text">Text</option><option value="sql">SQL</option><option value="python" selected>Python</option><option value="javascript">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="python source" data-editor-input>def greet(name):
return f"Hello, {name}"</textarea></div></div><output class="editor-status" data-editor-status aria-live="polite">python 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
전용 태그이지만 x-code-editor의 textarea 기반 접근성 계약을 그대로 따릅니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->