fix(highlight-code): fix code highlight

Author: StefanNieuwenhuis

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;
 
@@ -54,14 +54,15 @@ div.deckgo-highlight-code-container {
       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);
         }
@@ -75,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);
     }
@@ -147,25 +147,3 @@ 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

@@ -250,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');
 

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>