From e3f0f19524d88801e154b5c9704eaa92c30239e4 Mon Sep 17 00:00:00 2001
From: Sebastian Korotkiewicz <skorotkiewicz@gmail.com>
Date: Fri, 20 Oct 2023 03:35:05 +0200
Subject: [PATCH] line numbers

---
 src/components/Comment/CommentComp.jsx |  2 +-
 src/components/Snip.jsx                |  7 ++++++-
 src/styles/App.scss                    |  4 ++++
 src/styles/Comments.scss               | 14 +++++++-------
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/Comment/CommentComp.jsx b/src/components/Comment/CommentComp.jsx
index e748db9..58a97ea 100644
--- a/src/components/Comment/CommentComp.jsx
+++ b/src/components/Comment/CommentComp.jsx
@@ -81,7 +81,7 @@ const CommentComp = ({
 
   return (
     <>
-      <div className="comment">
+      <div className="comment-form-users">
         <div className="header">
           <span
             onClick={() => setShowFullPubkey((prev) => !prev)}
diff --git a/src/components/Snip.jsx b/src/components/Snip.jsx
index 9b6208d..8503c92 100644
--- a/src/components/Snip.jsx
+++ b/src/components/Snip.jsx
@@ -37,7 +37,12 @@ const Snip = ({ events }) => {
               <span>{dateFormatter(data.created_at)}</span>
             </p>
 
-            <SyntaxHighlighter language={s.mode} style={dracula}>
+            <SyntaxHighlighter
+              language={s.mode}
+              style={dracula}
+              showLineNumbers={true}
+              wrapLines={true}
+            >
               {s.snip}
             </SyntaxHighlighter>
 
diff --git a/src/styles/App.scss b/src/styles/App.scss
index c287e73..d954901 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -227,3 +227,7 @@ div[id^="react-select-"][id$="-listbox"] {
   align-self: center;
   align-content: center;
 }
+
+.react-syntax-highlighter-line-number {
+  color: #8b8b8b;
+}
diff --git a/src/styles/Comments.scss b/src/styles/Comments.scss
index 31a8cdc..3f466f5 100644
--- a/src/styles/Comments.scss
+++ b/src/styles/Comments.scss
@@ -1,4 +1,4 @@
-.comment {
+.comment-form-users {
   background-color: #2f2f2f;
 }
 
@@ -155,18 +155,18 @@ button {
   right: 0.1em;
 }
 
-.comment {
+.comment-form-users {
   padding: 0.5rem;
   border: 1px solid #6f6f6f;
   border-radius: 0.5rem;
 }
 
-.comment a {
+.comment-form-users a {
   color: #727272;
   text-decoration: none;
 }
 
-.comment .header {
+.comment-form-users .header {
   color: #dcdcdc;
   display: flex;
   justify-content: space-between;
@@ -174,11 +174,11 @@ button {
   font-size: 0.75em;
 }
 
-.comment .header .name {
+.comment-form-users .header .name {
   font-weight: bold;
 }
 
-.comment .message {
+.comment-form-users .message {
   white-space: pre-wrap;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -188,7 +188,7 @@ button {
   color: #727272;
 } */
 
-.comment .footer,
+.comment-form-users .footer,
 .footer-entries {
   display: flex;
   gap: 0.5rem;