CSS editor with line numbers
A code area with syntax colors, line numbers, a highlighted current line, auto indent and bracket closing.
Settings
Code
<div class="uvq06-cd"><div class="tb" aria-hidden="true"><i></i><span>styles.css</span><b>CSS</b></div><div class="ed"><div class="gt" aria-hidden="true"></div><div class="ar"><i class="hl" aria-hidden="true"></i><pre class="hi" aria-hidden="true"></pre><label><span class="sr">CSS code</span><textarea wrap="off" spellcheck="false" autocomplete="off"></textarea></label></div></div><div class="sb"><span class="ps">Ln 1, Col 1</span><span>Esc then Tab to leave</span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
A lightweight code field that needs no editor library. A transparent text area sits on top of a highlighted copy, so comments, properties, numbers and braces get their own colors while typing stays native. Line numbers and the current line band follow the caret, Enter keeps the indent and brackets and quotes close themselves.
The main color marks properties and the active line, the second color numbers and the language tag. Use it in theme builders, snippet forms and teaching pages; Tab inserts two spaces, and pressing Escape first lets keyboard users tab out.