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

webapp/sass/layout/_markdown.scss

@@ -26,16 +26,13 @@
     overflow-y: hidden;
     position: relative;
 
-    pre {
-        border: 1px solid rgba(221,221,221,0.2);
-        border-radius: .25em;
-        margin: 5px 0;
-        padding: 0;
-        text-align: left;
-    }
-
     code {
-        border: none;
+        border: 1px solid rgba(221,221,221,1);
+        border-radius: .25em;
+        font-size: 13px;
+        margin: 5px 0;
+        padding: 6.5px;
+        text-align: left;
         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);