feat(highlight-code): add line numbers

Author: StefanNieuwenhuis

docs/src/app/pages/app-home/app-home.scss

@@ -88,6 +88,8 @@ app-home {
     deckgo-highlight-code {
       --deckgo-highlight-code-background: var(--ion-color-dark);
       --deckgo-highlight-code-color: white;
+      --deckgo-highlight-code-line-number: #999;
+      --deckgo-highlight-code-line-divider: #999;
     }
   }
 

docs/src/global/theme/code.scss

@@ -8,6 +8,9 @@ deckgo-highlight-code {
   --deckgo-highlight-code-border-radius: 8px;
   --deckgo-highlight-code-background: var(--ion-color-light);
   --deckgo-highlight-code-color: inherit;
+
+  --deckgo-hightlight-code-line-number: #999;
+  --deckgo-hightlight-code-line-divider: #999;
 }
 
 deckgo-highlight-code, deckgo-deck {

webcomponents/highlight-code/src/components.d.ts

@@ -10,7 +10,6 @@ import {
   DeckdeckgoHighlightCodeAnchor,
 } from './components/declarations/deckdeckgo-highlight-code-anchor';
 
-
 export namespace Components {
   interface DeckgoHighlightCode {
     'anchor': string;
@@ -20,6 +19,7 @@ export namespace Components {
     'hideAnchor': boolean;
     'highlightLines': string;
     'language': string;
+    'lineNumbers': boolean;
     'load': () => Promise<void>;
     'src': string;
     'zoomCode': (zoom: boolean) => Promise<void>;
@@ -47,6 +47,7 @@ declare namespace LocalJSX {
     'hideAnchor'?: boolean;
     'highlightLines'?: string;
     'language'?: string;
+    'lineNumbers'?: boolean;
     'onCodeDidChange'?: (event: CustomEvent<HTMLElement>) => void;
     'onPrismLanguageLoaded'?: (event: CustomEvent<string>) => void;
     'src'?: string;

webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.scss

@@ -48,6 +48,25 @@ div.deckgo-highlight-code-container {
 
     display: var(--deckgo-highlight-code-display, block);
 
+    counter-reset: linenumber;
+
+    > div.deckgo-highlight-code-line-number {
+      counter-increment: linenumber;
+      position: relative;
+      padding-left: 3.5em;
+
+      &:before {
+        content: counter(linenumber);
+        min-height: 1rem;
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        width: 2.5em;
+        border-right: 1px solid var(--deckgo-highlight-code-line-number, #999);
+        color: var(--deckgo-highlight-code-line-divider, #999);
+        }
+    }
+
     div:empty {
       min-height: 1rem;
     }
@@ -128,3 +147,25 @@ div.deckgo-highlight-code-container {
     }
   }
 }
+
+// code { 
+//   counter-reset: linenumber;
+//   white-space: pre-wrap;
+
+// & > div {
+//   counter-increment: linenumber;
+//   position: relative;
+//   padding-left: 3.5em;
+
+//   &:before {
+//     content: counter(linenumber);
+//     min-height: 1rem;
+//     display: inline-block;
+//     position: absolute;
+//     left: 0;
+//     width: 2.5em;
+//     border-right: 1px solid #999;
+//     color: #999;
+//     }
+//   }
+// }

webcomponents/highlight-code/src/components/highlight-code/deckdeckgo-highlight-code.tsx

@@ -1,8 +1,8 @@
-import {Component, Prop, Watch, Element, Method, EventEmitter, Event, Listen, State, h, Host} from '@stencil/core';
+import { Component, Prop, Watch, Element, Method, EventEmitter, Event, Listen, State, h, Host } from '@stencil/core';
 
 import Prism from 'prismjs';
 
-import {DeckdeckgoHighlightCodeAnchor} from '../declarations/deckdeckgo-highlight-code-anchor';
+import { DeckdeckgoHighlightCodeAnchor } from '../declarations/deckdeckgo-highlight-code-anchor';
 
 @Component({
   tag: 'deckgo-highlight-code',
@@ -22,9 +22,10 @@ export class DeckdeckgoHighlightCode {
   @Prop() anchorZoom: string = '// DeckDeckGoZoom';
   @Prop() hideAnchor: boolean = true;
 
-  @Prop({reflectToAttr: true}) language: string = 'javascript';
+  @Prop({ reflectToAttr: true }) language: string = 'javascript';
 
-  @Prop({reflectToAttr: true}) highlightLines: string;
+  @Prop({ reflectToAttr: true }) highlightLines: string;
+  @Prop() lineNumbers: boolean = true;
 
   @Prop() editable: boolean = false;
 
@@ -42,7 +43,7 @@ export class DeckdeckgoHighlightCode {
     }
   }
 
-  @Listen('prismLanguageLoaded', {target: 'document'})
+  @Listen('prismLanguageLoaded', { target: 'document' })
   async languageLoaded($event: CustomEvent) {
     if (!$event || !$event.detail) {
       return;
@@ -178,9 +179,23 @@ export class DeckdeckgoHighlightCode {
 
       if (container) {
         try {
-          const highlightedCode: string = Prism.highlight(code, Prism.languages[this.language], this.language);
+          if (this.lineNumbers) {
+            // split the code on linebreaks
+            const regEx = RegExp(/\n(?!$)/g); // 
+            const match = code.split(regEx);
+            match.forEach(m => {
+              let div: HTMLElement = document.createElement('div');
+              div.classList.add('deckgo-highlight-code-line-number');
+
+              let highlight: string = Prism.highlight(m, Prism.languages[this.language], this.language);
+              div.innerHTML = highlight;
+              container.children[0].appendChild(div);
+            });
+          }else{
+            container.children[0].innerHTML = Prism.highlight(code, Prism.languages[this.language], this.language);
+          }
+
 
-          container.children[0].innerHTML = highlightedCode;
 
           await this.addAnchors();
 
@@ -388,7 +403,7 @@ export class DeckdeckgoHighlightCode {
       if (slottedCode) {
         setTimeout(() => {
           slottedCode.setAttribute('contentEditable', 'true');
-          slottedCode.addEventListener('blur', this.applyCode, {once: true});
+          slottedCode.addEventListener('blur', this.applyCode, { once: true });
           slottedCode.addEventListener('keydown', this.catchNewLine);
 
           slottedCode.focus();
@@ -458,10 +473,10 @@ export class DeckdeckgoHighlightCode {
 
   render() {
     return (
-      <Host class={{'deckgo-highlight-code-edit': this.editing}}>
+      <Host class={{ 'deckgo-highlight-code-edit': this.editing }}>
         <div class="deckgo-highlight-code-container"
-             onMouseDown={() => this.edit()}
-             onTouchStart={() => this.edit()}>
+          onMouseDown={() => this.edit()}
+          onTouchStart={() => this.edit()}>
           <code></code>
           <slot name="code"></slot>
         </div>