Syntax Highlighting Displayed In Ubuntu Terminal Like

Display the code of your apps, websites or blogs with code highlighting in stylish Ubuntu Terminal like.

Image for post
Image for post
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 😄.

HTML

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="https://unpkg.com/@deckdeckgo/highlight-code@latest/dist/deckdeckgo-highlight-code/deckdeckgo-highlight-code.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@deckdeckgo/highlight-code@latest/dist/deckdeckgo-highlight-code/deckdeckgo-highlight-code.js"></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:

Image for post
Image for post

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 😁

Image for post
Image for post

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 🚀.

Gatsby

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.

Image for post
Image for post

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 🚀

David

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 😜

Image for post
Image for post

Written by

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store