Merge pull request #213 from StefanNieuwenhuis/master

Add line numbers to highlight code

Author: peterpeterparker

docs/docs/components/app-components-highlight-code/app-components-highlight-code.md

@@ -91,6 +91,8 @@ The `<deckgo-highlight-code/>` could be styled using the following CSS4 variable
 | --deckgo-highlight-code-font-size |  | The size of the font for the code |
 | --deckgo-highlight-code-font-family | monospace | The family of the font for the code |
 | --deckgo-highlight-code-line-background | #3880ff | The background of the lines you wish to highlight |
+| --deckgo-highlight-code-line-divider | #999999  | The color of the line numbers |
+| --deckgo-highlight-code-line-number | #999999  | The color of the divider between line numbers and code |
 | --deckgo-highlight-code-line-padding |  | A padding for each lines you wish to highlight |
 | --deckgo-highlight-code-line-border-top |  | The border-top property of the lines you wish to highlight |
 | --deckgo-highlight-code-direction | ltr | The direction of the displayed code |

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

@@ -39,7 +39,7 @@ div.deckgo-highlight-code-container {
   text-align: var(--deckgo-highlight-code-text-align, start);
 
   code {
-    overflow-y: var(--deckgo-highlight-code-scroll, scroll);;
+    overflow-y: var(--deckgo-highlight-code-scroll, scroll);
 
     white-space: pre-wrap;
 
@@ -48,6 +48,26 @@ 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;
+        background: var(--deckgo-highlight-code-background, white);
+        border-right: 1px solid var(--deckgo-highlight-code-line-number, #999);
+        color: var(--deckgo-highlight-code-line-divider, #999);
+        }
+    }
+
     div:empty {
       min-height: 1rem;
     }
@@ -56,9 +76,8 @@ div.deckgo-highlight-code-container {
       visibility: hidden;
     }
 
-    span.deckgo-highlight-code-line {
+    .deckgo-highlight-code-line {
       background: var(--deckgo-highlight-code-line-background, #3880ff);
-      padding: var(--deckgo-highlight-code-line-padding);
       border-top: var(--deckgo-highlight-code-line-border-top);
       border-bottom: var(--deckgo-highlight-code-line-border-bottom);
     }

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;
@@ -173,14 +174,30 @@ export class DeckdeckgoHighlightCode {
 
   private parseCode(code: string): Promise<void> {
     return new Promise<void>(async (resolve, reject) => {
-
       const container: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-highlight-code-container');
 
       if (container) {
         try {
-          const highlightedCode: string = Prism.highlight(code, Prism.languages[this.language], this.language);
+          if (this.lineNumbers) {
+            // clear the container first 
+            container.children[0].innerHTML = '';
+            
+            // 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();
 
@@ -233,7 +250,6 @@ export class DeckdeckgoHighlightCode {
       if (this.highlightLines && this.highlightLines.length > 0) {
 
         const rows: number[] = await this.findRowsToHighlight();
-
         if (rows && rows.length > 0) {
           const containerCode: HTMLElement = this.el.shadowRoot.querySelector('code');
 
@@ -388,7 +404,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 +474,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>

webcomponents/highlight-code/src/components/highlight-code/readme.md

@@ -15,6 +15,7 @@
 | `hideAnchor`     | `hide-anchor`     |             | `boolean` | `true`                |
 | `highlightLines` | `highlight-lines` |             | `string`  | `undefined`           |
 | `language`       | `language`        |             | `string`  | `'javascript'`        |
+| `lineNumbers`    | `line-numbers`    |             | `boolean` | `true`                |
 | `src`            | `src`             |             | `string`  | `undefined`           |
 
 

webcomponents/highlight-code/src/index.html

@@ -87,5 +87,22 @@ <h1>Plain code and java language:</h1>
     Markdown</code>
 </deckgo-highlight-code>
 
+<h1>Without line numbers</h1>
+<deckgo-highlight-code language="java" line-numbers="false" highlight-lines="0,2 6,6">
+  <code slot="code">interface NumericTest {
+    boolean computeTest(int n);
+    }
+
+    public static void main(String args[]) {
+    NumericTest isEven = (n) -> (n % 2) == 0;
+    NumericTest isNegative = (n) -> (n < 0);
+
+    // Output: false
+    System.out.println(isEven.computeTest(5));
+
+    // Output: true
+    System.out.println(isNegative.computeTest(-5));
+    }</code>
+</deckgo-highlight-code>
 </body>
 </html>