Merge pull request #433 from kac89/dev

up
kac89 · Nov 12, 2024 · 280bec3 · 280bec3
2 parents 865dba1 + ef91c17
commit 280bec3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/src/app/dialog-editor-fullscreen/dialog-editor-fullscreen.component.ts b/src/app/dialog-editor-fullscreen/dialog-editor-fullscreen.component.ts
@@ -74,10 +74,28 @@ export class DialogEditorFullscreenComponent implements OnInit {
       })
     );
 
+    const applyLineNumbers = (code: string) => {
+        const lines = code.trim().split('\n');
+
+        const rows = lines.map((line, idx) => {
+          const lineNumber = idx + 1;
+
+          let html = '<tr>';
+    	    html += `<td class="line-number">${lineNumber}</td>`;
+          html += `<td class="code-line">${line}</td>`;
+      	    html += '</tr>';
+      	    return html;
+        });
+
+        return `<table><tbody>${rows.join('')}</tbody></table>`;
+      };
+
+
     // add Markdown rendering
     const renderer = new marked.Renderer();
     renderer.code = function (token) {
-      return `<code>` + DOMPurify.sanitize(token.text) + `</code>`;
+      token.text = applyLineNumbers(token.text);
+      return `<pre class="hljs"><code>` + DOMPurify.sanitize(token.text) + `</code></pre>`;
     };
 
     renderer.blockquote = function (token) {

diff --git a/src/app/report/report.component.scss b/src/app/report/report.component.scss
@@ -207,7 +207,6 @@ mat-paginator {
   max-width: 100%;
   min-width: 100px;
   padding-left: 5px;
-  border-left: 12px solid #16bf6e;
   border-radius: 5px;
 }
 

diff --git a/src/styles.scss b/src/styles.scss
@@ -156,10 +156,6 @@ code.hljs {
   padding: 3px 5px
 }
 
-.hljs {
-  background: #1e1e1e;
-  color: #dcdcdc
-}
 
 .hljs-keyword,
 .hljs-literal,
@@ -260,6 +256,23 @@ code.hljs {
   width: 100%
 }
 
+pre.hljs code {
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  .code-line {
+    padding-left: 7px;
+  }
+  .line-number {
+    min-width: 22px;
+    text-align: left;
+    width: 1%;
+    color: #ccc;
+    border-right: 1px solid #16bf6e
+  }
+}
+
 /////////////////////// marked highlight end
 
 /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */