Format email code blocks and code blocks in emails

For code blocks with language `email`,
use the standard font (rather than monospace),
and word-wrap long lines (rather than scrolling).

Changelog: changed

app/assets/stylesheets/framework/mixins.scss

@@ -419,6 +419,30 @@
   height: $gl-font-size * $code-line-height * 0.9;
 }
 
+@mixin email-code-block {
+  .code.language-email {
+    font-family: inherit;
+    font-size: inherit;
+
+    code {
+      white-space: pre-wrap;
+      font-family: inherit;
+
+      // Rouge `Name.Tag` and `Operator` token (email header key + ':')
+      .nt,
+      .o {
+        color: inherit;
+        font-weight: bold;
+      }
+
+      // Rouge `Name.Attribute` token (email header value)
+      .na {
+        color: inherit;
+      }
+    }
+  }
+}
+
 @mixin avatar-counter($border-radius: 1em) {
   background-color: $gray-darkest;
   color: $white;

app/assets/stylesheets/framework/typography.scss

@@ -597,6 +597,8 @@
   .text-justify {
     text-align: justify !important;
   }
+
+  @include email-code-block;
 }
 
 /**

app/assets/stylesheets/notify.scss

+@import 'framework/mixins';
 @import 'framework/variables';
 
 img {
@@ -38,3 +39,14 @@ pre.commit-message {
 .gl-label-text-dark {
   color: $gl-text-color;
 }
+
+.content {
+  .markdown-code-block pre.code {
+    padding: $gl-padding-8 $input-horizontal-padding;
+    margin: 0 0 $gl-padding-8;
+    border: 1px solid $gray-100;
+    border-radius: $border-radius-small;
+  }
+
+  @include email-code-block;
+}