Syntax Highlighting Displayed In Ubuntu Terminal Like

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

Background photo by MUNMUN SINGH on Unsplash

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.

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

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'
}
},
],
},
},
]

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!

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