terminal-preview is a collection of JavaScript and CSS that will enable parsing and styling of terminal ANSI escape codes for simple preview. It’s been developed as a result of my experimenting with bash-ps1 and image-to-ansi.

I’d wanted to extract the code I used in the those projects into a stand-alone project/component that could be added to an existing page where ANSI escape sequences need to be interpreted. I’ve toyed with the idea of making it a Web Component or something like that but haven’t just yet.

It utilises jQuery to select the elements, bind the events and for some utility methods.


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.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.terminal .dim .fg-90,
\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.

Where to get it?

There’s a github repository that you can use. You’re free to use this, but if you make something cool I’d love to see it!

Utilising rawgit, it’s possible to add the following code to your page and automatically process elements with a class of terminal:

!function(){var e=document.getElementsByTagName("head")[0],t=function(t,a){var r=document.createElement("script");r.src=t,r.type="text/javascript",a&&(r.onload=a),e.appendChild(r)},a=function(t){var a=document.createElement("link");a.href=t,a.rel="stylesheet",e.appendChild(a)},r=function(){["https://cdn.rawgit.com/dom111/terminal-preview/master/dist/terminal-min.css","https://cdn.rawgit.com/dom111/terminal-preview/master/dist/terminal-min.js","https://cdn.rawgit.com/dom111/terminal-preview/master/dist/parse-min.js"].forEach(function(e){(/css$/.test(e)?a:t)(e)})};"jQuery"in window?r():t("https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js",r)}();

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.