← All elements
<div class="cw"><div class="bar"><i></i><i></i><i></i><span>index.css</span></div><pre><b>.card</b> {
<em>display</em>: grid;
<em>gap</em>: <u>16px</u>;
}</pre></div>About this card
A terminal-style window with traffic-light dots, a title bar and colour-coded code lines.
How it works
A title bar with three traffic-light dots sits over a pre block. Inline elements such as b, em and u are given colours to imitate syntax highlighting without any script.
Ways to customise it
- Replace the code with your own.
- Change the highlight colours.
- Add a line-number column with a counter.
Good to know
Use real code elements and keep contrast high for each highlight colour. For long snippets, make the pre scroll horizontally.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.