Reorganized syntax highlighting code and added search term highlighting for code blocks with syntax highlighting (#3191)

1 files changed, 15 insertions, 7 deletions

diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss
index 9bac332d6..04c4434ac 100644
--- a/webapp/sass/layout/_markdown.scss
+++ b/webapp/sass/layout/_markdown.scss
@@ -26,16 +26,13 @@
     overflow-y: hidden;
     position: relative;
 
-    pre {
-        border: 1px solid rgba(221,221,221,0.2);
+    code {
+        border: 1px solid rgba(221,221,221,1);
         border-radius: .25em;
+        font-size: 13px;
         margin: 5px 0;
-        padding: 0;
+        padding: 6.5px;
         text-align: left;
-    }
-
-    code {
-        border: none;
         white-space: pre;
     }
 
@@ -51,6 +48,10 @@
     &--wrap code {
         white-space: pre-wrap;
     }
+
+    .hljs {
+        position: relative;
+    }
 }
 
 .post-code__language {
@@ -78,6 +79,13 @@
     user-select: none;
 }
 
+.post-code__search-highlighting {
+    color: transparent;
+    pointer-events: none;
+    position: absolute;
+    @include user-select(none);
+}
+
 .post__body {
     hr {
         @include opacity(.2);