Highlight Code

The "Highlight Code" component is an extra component which let you highlight code easily.

To highlight your code, this component is using Prism.js from Lea Verou and James DiGioia.

Moreover, per default, your code will be displayed in form of a stylish "windowed" card as the amazing carbon, the tool to create and share beautiful images of your source code, would do.

Table of contents

Showcase

Carbon terminal card:

console.log('Hello World');
Theme:
Ubuntu terminal card:
console.log('Hello World');david@ubuntu:~
No terminal:
console.log('Hello World');

Installation

This component could be added to your web application using the following methods.

If you are using our Starter Kit this template is included. You don't need to install it so therefore you should skip the "Installation" chapter.

Using DeckDeckGo Highlight Code from a CDN

It's recommended to use unpkg to use the DeckDeckGo Code from a CDN. To do so, add the following include script in the main HTML file of your project:

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

Install DeckDeckGo Highlight Code from NPM

Install DeckDeckGo - Highlight Code in your project from npm using the following command:

npm install @deckdeckgo/highlight-code

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/highlight-code';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/highlight-code/dist/loader'; deckDeckGoElement();

Usage

The <deckgo-highlight-code/> Web Component will highlight your code using Prism.js.

You could inject a <code/> tag using slot or provide an URI to the file containing your code.

If you are displaying your code in an Ubuntu terminal, you could also displays a text in the toolbar (header) using the slot user.

Properties

The <deckgo-highlight-code/> expose the following properties:

PropertyAttributeDescriptionTypeDefault
srcsrcThe web url to the source code you would like to showcasestring
anchoranchorThe anchor identifier which will be use to find the next anchor to scroll too using findNextAnchor()string'// DeckDeckGo'
anchorZoomanchor-zoomThe anchor identifier which will be use to find the next anchor to zoom inside your code using findNextAnchor()string'// DeckDeckGoZoom'
hideAnchorhide-anchorSet this attribute to false in case you would like to actually display the anchor value toobooleantrue
languagelanguageDefine the language to be used for the syntax highlighting. The list of supported languages is defined by Prism.jsstring'javascript'
highlightLineshighlight-linesIf you wish to highlight some lines of your code. The lines number should be provided as number separated with coma and group separated with space. For example: "3,5 8,9 13,13 14,17"string
lineNumbersline-numbersDisplay the number of the lines of codebooleanfalse
editableeditableIn case you would like to set the code component as being editable.booleanfalse
terminalterminalPresent the code in a stylish "windowed" card.carbon, ubuntu or nonecarbon
themethemeThe theme of the selected terminal (applied only in case of carbon)3024-night, a11y-dark, blackboard, base16-dark, base16-light, cobalt, dracula, duotone, hopscotch, lucario, material, monokai, night-owl, nord, oceanic-next, one-light, one-dark, panda, paraiso, seti, shades-of-purple, solarized-dark, solarized-light, synthwave, twilight, verminal, vscode, yeti and zenburndracula

Fonts

Per default, the font monospace is used to display the code for the terminal carbon or none. You can overwrite this option using the following CSS variables.

If you display your code in an ubuntu terminal, the related Ubuntu fonts are going to be fetched and injected in your page.

Styling

The <deckgo-highlight-code/> could be styled using the following CSS4 variables:

CSS4 variableDefaultNote
--deckgo-highlight-code-displayblockThe display property of the code
--deckgo-highlight-code-colorinheritThe color of the displayed code
--deckgo-highlight-code-backgroundThe background of the displayed code
--deckgo-highlight-code-padding0 16pxThe padding of the displayed code
--deckgo-highlight-code-border-radiusThe border radius of the displayed code
--deckgo-highlight-code-margin-bottom16px 0 or 0 0 16pxMargin bottom of the code
--deckgo-highlight-code-zoom1If you wish to manually zoom the code
--deckgo-highlight-code-white-spacepre-wrapThe attribute white-space of the displayed
code
--deckgo-highlight-code-font-sizeThe size of the font for the code
--deckgo-highlight-code-font-familymonospaceThe family of the font for the code
--deckgo-highlight-code-line-background#3E4564The background of the lines you wish to highlight
--deckgo-highlight-code-line-numbers#999999The color of the line numbers and divider
--deckgo-highlight-code-line-paddingA padding for each lines you wish to highlight
--deckgo-highlight-code-line-border-topThe border-top property of the lines you wish to highlight
--deckgo-highlight-code-directionltrThe direction of the displayed code
--deckgo-highlight-code-text-alignstartThe text alignment of your code
--deckgo-highlight-code-token-comment#6272a4Highlighted code tokens comment, prolog, doctype and cdata
--deckgo-highlight-code-token-punctuationinheritHighlighted code token punctuation
--deckgo-highlight-code-token-property#bd93f9Highlighted code tokens property, tag, boolean, number, constant, symbol, deleted
--deckgo-highlight-code-token-selector#50fa7bHighlighted code tokens selector, attr-name, string, char, builtin, inserted
--deckgo-highlight-code-token-operator#ff79c6Highlighted code tokens operator, entity, url, string
--deckgo-highlight-code-token-atrule#ff79c6Highlighted code tokens atrule, attr-value, keyword
--deckgo-highlight-code-token-function#ffb86cHighlighted code function, class-name
--deckgo-highlight-code-token-regex#f1fa8cHighlighted code tokens regex, important, variable
--deckgo-highlight-code-empty-text"Click to add your code"Place holder in case the editable is set to true
--deckgo-highlight-code-scrollautoIn case you would like to change the scroll property of the shadowed code block
--deckgo-highlight-code-container-widthThe attribute width of the code's container
--deckgo-highlight-code-container-heightThe attribute height of the code's container
--deckgo-highlight-code-container-displayThe attribute display of the code's container
--deckgo-highlight-code-container-justify-contentThe attribute justify-content of the code's container
--deckgo-highlight-code-container-flex-directionThe attribute flex-direction of the code's container
--deckgo-highlight-code-container-align-itemsThe attribute align-items of the code's container

Carbon

Furthermore the following styles apply if the code is displayed as a "carbon" terminal card (terminal property equals to carbon).

CSS4 variableDefaultNote
--deckgo-highlight-code-carbon-displayblockThe display property of the host container.
--deckgo-highlight-code-carbon-toolbar-displayblockThe display property of the toolbar container.
--deckgo-highlight-code-carbon-overflowautoThe overflow property of the host container.
--deckgo-highlight-code-carbon-borderThe border property of the host container.
--deckgo-highlight-code-carbon-border-radius4pxThe border-radius property of the host container.
--deckgo-highlight-code-carbon-background#282a36The background property of the host container.
--deckgo-highlight-code-carbon-colorwhiteThe color property of the host container.
--deckgo-highlight-code-carbon-box-shadowrgba(0, 0, 0, 0.55) 0 8px 16pxThe box-shadow property of the host container.
--deckgo-highlight-code-carbon-margin16px 0The margin property of the host container.
--deckgo-highlight-code-carbon-header-padding16pxThe padding property of the card header.
--deckgo-highlight-code-carbon-header-margin0The margin property of the card header.
--deckgo-highlight-code-carbon-header-button-width12pxThe width of a button of the card header.
--deckgo-highlight-code-carbon-header-button-height12pxThe height of a button of the card header.
--deckgo-highlight-code-carbon-header-button-border-radius50%The border-radius of a button of the card header.
--deckgo-highlight-code-carbon-header-button-margin0 6px 0 0The margin of a button of the card header.
--deckgo-highlight-code-carbon-header-button-red-background#FF5F56The background of the first button of the card header.
--deckgo-highlight-code-carbon-header-button-red-border0.5px solid #E0443EThe border of the first button of the card header.
--deckgo-highlight-code-carbon-header-button-yellow-background#FFBD2EThe background of the second button of the card header.
--deckgo-highlight-code-carbon-header-button-yellow-border0.5px solid #DEA123The border of the second button of the card header.
--deckgo-highlight-code-carbon-header-button-green-background#27C93FThe background of the third button of the card header.
--deckgo-highlight-code-carbon-header-button-green-border0.5px solid #1AAB29The color of the third button of the card header.

Ubuntu

If the code is displayed as an "ubuntu" terminal card (terminal property equals to ubuntu) the following styles could be applied.

CSS4 variableDefaultNote
--deckgo-highlight-code-ubuntu-displayblockThe display property of the host container.
--deckgo-highlight-code-ubuntu-overflowautoThe overflow property of the host container.
--deckgo-highlight-code-ubuntu-borderThe border property of the host container.
--deckgo-highlight-code-ubuntu-border-radius6px 6px 0 0The border-radius property of the host container.
--deckgo-highlight-code-ubuntu-backgroundrgba(56, 4, 40, 0.9)The background property of the host container.
--deckgo-highlight-code-ubuntu-color#dddThe color property of the host container.
--deckgo-highlight-code-ubuntu-box-shadow2px 4px 10px rgba(0, 0, 0, 0.5)The box-shadow property of the host container.
--deckgo-highlight-code-ubuntu-margin16px 0The margin property of the host container.
--deckgo-highlight-code-ubuntu-header-padding0 8pxThe padding property of the card header.
--deckgo-highlight-code-ubuntu-header-height25pxThe height property of the card header.
--deckgo-highlight-code-ubuntu-header-backgroundlinear-gradient(#504b45 0%, #3c3b37 100%)The background property of the card header.
--deckgo-highlight-code-ubuntu-header-font-familyUbuntuThe font-family property of the card header.
--deckgo-highlight-code-ubuntu-header-button-width12pxThe width of a button of the card header.
--deckgo-highlight-code-ubuntu-header-button-height12pxThe height of a button of the card header.
--deckgo-highlight-code-ubuntu-header-button-border-radius50%The border-radius of a button of the card header.
--deckgo-highlight-code-ubuntu-header-button-margin0 6px 0 0The margin of a button of the card header.
--deckgo-highlight-code-carbon-header-button-font-size7pxThe font-size of a button of the card header.
--deckgo-highlight-code-carbon-header-button-colorblackThe color of a button of the card header.
--deckgo-highlight-code-carbon-header-button-text-shadow0px 1px 0px rgba(255, 255, 255, 0.2)The text-shadow of a button of the card header.
--deckgo-highlight-code-carbon-header-button-box-shadow0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642The box-shadow of a button of the card header.
--deckgo-highlight-code-carbon-header-button-close-backgroundlinear-gradient(#f37458 0%, #de4c12 100%)The close button background of the card header.
--deckgo-highlight-code-carbon-header-button-close-borderThe close button border of the card header.
--deckgo-highlight-code-carbon-header-button-minimize-backgroundlinear-gradient(#7d7871 0%, #595953 100%)The minimize button background of the card header.
--deckgo-highlight-code-carbon-header-button-minimize-borderThe minimize button border of the card header.
--deckgo-highlight-code-carbon-header-button-maximize-backgroundlinear-gradient(#7d7871 0%, #595953 100%)The maximize button background of the card header.
--deckgo-highlight-code-carbon-header-button-maximize-borderThe maximize button border of the card header.
--deckgo-highlight-code-carbon-header-user-color#d5d0ceThe user's color of the card header.
--deckgo-highlight-code-carbon-header-user-font-size12pxThe user's font-size of the card header.
--deckgo-highlight-code-carbon-header-user-line-height14pxThe user's line-height of the card header.
--deckgo-highlight-code-carbon-header-user-margin0 0 1px 4pxThe user's margin of the card header.

Methods

The <deckgo-highlight-code/> exposes the following methods:

Find the next anchor

findNextAnchor(enter: boolean) => Promise<boolean>

Zoom into code

zoomCode(zoom: boolean) => Promise<void>

Load or reload the component

load() => Promise<void>

Events

The <deckgo-highlight-code/> will bubble the following events:

Code did change

Emitted when the code was edited (see attribute editable). Propagate the root component itself.

codeDidChange(HTMLElement);

Examples

You could find the examples in the src/index.html of the project.

<deckgo-highlight-code src="https://domain.com/yourfile.js"> </deckgo-highlight-code> <deckgo-highlight-code language="java" highlight-lines="2,2"> <code slot="code">public static void main(String args[]) { System.out.println("Hello World"); }</code> </deckgo-highlight-code><deckgo-highlight-code terminal="ubuntu"> <code slot="code">console.log('Hello World');</code> <span slot="user">david@ubuntu:~</span> </deckgo-highlight-code>