terminal-preview v0.1

You could have a pre element with a selection of contents:

\e[35m./terminal.css\e[m\e[36m-\e[m.terminal::-webkit-scrollbar-thumb { background: #999; border-radius: 1ex; }
\e[35m./terminal.css\e[m\e[36m-\e[m
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal .\e[01;31mcursor\e[m:after { content: ''; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.blink-\e[01;31mcursor\e[m .\e[01;31mcursor\e[m:after { animation: blink 1s linear infinite; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.\e[01;31mcursor\e[m-pipe .\e[01;31mcursor\e[m:after { content: '|'; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.\e[01;31mcursor\e[m-underscore .\e[01;31mcursor\e[m:after { content: '_'; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal.\e[01;31mcursor\e[m-block .\e[01;31mcursor\e[m:after { content: '\02588'; }
\e[35m./terminal.css\e[m\e[36m-\e[m
\e[35m./terminal.css\e[m\e[36m-\e[m.terminal .dim .fg-90,
\e[36m--\e[m
\e[35m./terminal.css\e[m\e[36m-\e[m.terminal-wrap .copy { display: none; position: absolute; right: 2px; top: 2px; }
\e[35m./terminal.css\e[m\e[36m-\e[m.terminal-wrap:hover .copy { display: block; }
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal-wrap:hover .\e[01;31mcursor\e[m,
\e[35m./terminal.css\e[m\e[36m:\e[m.terminal:focus .\e[01;31mcursor\e[m { display: none; }

You could also \e[5mpreview\e[0m items as an \e[31;4minline element\e[0m. There are also classes that can change the style to a light terminal \e[32mlike this, or add in a cursor like this or this.

I've used the component as an input where content is evaluated as your type. Try changing the 31 to 34 and you can see the element changing style as you type:

\e[31mRed\e[m and \e[32mgreen\e[m and \e[33myellow\e[m!

By default the control characters aren't shown, until hovered or when the element has focus. Likewise any non-existent items (like the cursor or interpreted control codes) will be hidden.