Syntax Highlighting Displayed In Ubuntu Terminal Like

February 24, 2020 · 3 min read

#webdev #showdev #javascript #css

Background photo by MUNMUN SINGH on Unsplash

A couple of days ago, Cody Pearce published an article which picked my curiosity. In his post he was displaying how the unique and immediately recognizable design of the Ubuntu terminal can be reproduced with CSS.

In DeckDeckGo, our editor for presentations, we are providing a code highlighter Web Component, developed with Stencil, which can be integrated in your slides, apps or even easily in a Gatsby website.

That’s why I thought it would be fun to merge Cody’s idea and design 😄.


The quickest way to try out the component is probably to plug it, with the help of Unpkg, in a plain HTML file. Once the references to fetch its code have been added in the page header, it can be consumed.

Regarding the code to highlight, it should be provided to match the slot name code and that’s it, everything you need to highlight the code is ready.

<html> <head> <script type="module" src=""></script> <script nomodule="" src=""></script> </head> <body> <deckgo-highlight-code> <code slot="code">console.log('Hello World');</code> </deckgo-highlight-code> </body> </html>

Rendered in a browser, the above code looks like the following:

As you may notice, it isn’t yet rendered in a stylish Ubuntu terminal like but in a “Macish” terminal, which is the default behavior. Therefore, to achieve our goal, we just improve the solution by providing the attribute terminal set to ubuntu .

<deckgo-highlight-code terminal="ubuntu"> <code slot="code">console.log('Hello World');</code> </deckgo-highlight-code>

And voilà, nothing more, nothing less 😁

By the way, don’t you feel too that it is over awesome to be able to write what, five lines of code in a plain HTML file and to already have a “complex” and performing element rendered? Damned, I love Web Components 🚀.


As briefly mentioned above, we also do provide a plugin to integrate easily our component in any Gatsby websites and blogs too. At the end of last year I published another post to display how it could be integrated, therefore I won’t cover the setup process again but just I just want to mention that the style could be selected through an optional plugin configuration:

// In your gatsby-config.js plugins: [ { resolve: `gatsby-transformer-remark`, options: { plugins: [ { resolve: `gatsby-remark-highlight-code`, options: { terminal: 'ubuntu' } }, ], }, }, ]

If I would apply the above configuration to my personal website then, after rebuild, automatically all of its blocks of code would be encapsulated in Ubuntu terminal like.

Properties And Styling

Beside the default configuration, the components supports many options. Notably, because it is a wrapper around Prism.js, the ability to highlight 205 languages (to be provided though a property language ) and offers many styling options through CSS4 variables. From specifying the color of the highlighted code to customizing the terminal or none, even if it’s a shadowed Web Component, it does expose many options and in case you would need more, ping me!

To infinity and beyond 🚀


P.S.: Even though the Ubuntu Terminal like are only going to be unleashed in our next major release, such stylish cards do already also look good in slides, so why not giving a try to DeckDeckGo for your next talk 😜


Read the article

A Little Scanner App Made With The Web

January 4th 2021 · 11 min read

#webdev #showdev #javascript #react

Read the article

More Gatsby i18n Tips And Tricks

December 24th 2020 · 5 min read

#gatsby #react #javascript #i18n

Read the article

Copy URL To Clipboard On Npm Run Start

December 11th 2020 · 3 min read

#javascript #webdev #nodejs #npm

More articles

Company / Address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

This website is open source. Its code is available on GitHub