Add Styling for better code readability (#105)

* Add Styling for better code readability * refactor style sheet
UmairJibran · Oct 12, 2024 · 95a11bf · 95a11bf
1 parent 49ab295
commit 95a11bf
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/src/styles/markdown-styles.module.css b/src/styles/markdown-styles.module.css
@@ -52,3 +52,36 @@
 .markdown img {
  @apply flex justify-center w-full my-2;
 }
+
+.markdown pre code {
+ font-family: "Fira Code", monospace;
+ background-color: #2d2d2d;
+ color: #f8f8f2;
+ padding: 12px;
+ border-radius: 8px;
+ display: block;
+ overflow-x: auto;
+ line-height: 1.6;
+ white-space: pre;
+ position: relative;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.markdown code {
+ font-family: "Fira Code", monospace;
+ background-color: #2d2d2d;
+ color: #f8f8f2;
+ padding: 2px 6px;
+ border-radius: 4px;
+ display: inline;
+ white-space: nowrap;
+}
+
+.markdown pre code::before {
+ counter-increment: line;
+ content: counter(line);
+ position: absolute;
+ left: -2.5em;
+ text-align: right;
+ color: #888;
+}