line numbers

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)}

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>
 

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;
+}

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;