Created component CodePreview

webapp/sass/components/_files.scss

@@ -234,6 +234,7 @@
 
 .file-details__container {
     @include display-flex;
+    background: $white;
 
     .file-details {
         height: 270px;

webapp/sass/components/_modal.scss

@@ -256,13 +256,27 @@
             }
 
             > div {
-                background: $white;
                 display: inline-block;
                 min-height: 100px;
                 min-width: 320px;
                 position: relative;
             }
 
+            code {
+                min-height: 130px;
+                min-width: 330px;
+            }
+
+            pre, code {
+                display: inline-block;
+            }
+
+            .post-body--code {
+                max-height: calc(100vh - 80px);
+                max-width: calc(100vw - 80px);
+                overflow: auto;
+            }
+
             img {
                 max-height: 100%;
                 max-width: 100%;

webapp/sass/layout/_markdown.scss

@@ -22,29 +22,63 @@
 }
 
 .post-body--code {
+    overflow-x: auto;
+    overflow-y: hidden;
     position: relative;
 
     pre {
-        margin-bottom: 0;
-        overflow: auto;
-        word-break: normal;
-        word-wrap: normal;
+        border: 1px solid rgba(221,221,221,0.2);
+        border-radius: .25em;
+        margin: 0;
+        padding: 0px;
+        text-align: left;
+        white-space: nowrap;
+    }
+
+    code {
+        border: none;
+        white-space: pre;
+    }
+
+    td {
+        padding: 0 .5em;
+        vertical-align: top;
+    }
+
+    &:hover .post-body--code__language {
+        @include opacity(1);
     }
 }
 
 .post-body--code__language {
+    @include opacity(0);
     @include translate3d(0, 0, 0);
     background: #21586d;
+    border-radius: 0 .25em;
     color: $white;
-    font-size: 13px;
-    opacity: .7;
     padding: 4px 10px 5px;
     position: absolute;
     right: 0;
     top: 0;
+    -webkit-transition: opacity 0.6s;
+    -moz-transition: opacity 0.6s;
+    -o-transition: opacity 0.6s;
+    transition: opacity 0.6s;
     z-index: 5;
 }
 
+.post-body--code__lineno {
+    border-right: 1px solid #aaa;
+    color: #aaa;
+    margin-right: .5em;
+    text-align: right;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
 .post__body {
     hr {
         @include opacity(.2);
@@ -108,9 +142,9 @@ blockquote {
 }
 
 pre {
-    border: none;
     color: inherit;
     margin: 5px 0;
+    padding: 0;
 }
 
 code {