✨ Adds highlightjs dependency.

frontend/resources/styles/common/dependencies/highlightjs-theme.scss

@@ -0,0 +1,81 @@
+/*
+Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #23241f;
+}
+
+.hljs,
+.hljs-tag,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-link {
+  color: #ae81ff;
+}
+
+.hljs-code,
+.hljs-title,
+.hljs-section,
+.hljs-selector-class {
+  color: #a6e22e;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-attr {
+  color: #f92672;
+}
+
+.hljs-symbol,
+.hljs-attribute {
+  color: #66d9ef;
+}
+
+.hljs-params,
+.hljs-class .hljs-title {
+  color: #f8f8f2;
+}
+
+.hljs-string,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-variable {
+  color: #e6db74;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}

frontend/resources/styles/main-default.scss

@@ -19,6 +19,7 @@
 @import 'common/dependencies/reset';
 @import 'common/dependencies/animations';
 @import 'common/dependencies/z-index';
+@import 'common/dependencies/highlightjs-theme';
 
 //#################################################
 // Layouts

frontend/resources/styles/main/partials/handoff.scss

@@ -15,6 +15,30 @@
   justify-content: center;
 }
 
+.attributes-copy-button {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    fill: $color-gray-20;
+    transition: fill 0.3s;
+
+    &:hover {
+      fill: $color-primary;
+    }
+  }
+}
+
 .attributes-block {
   user-select: text;
 
@@ -30,30 +54,6 @@
     border-bottom: none;
   }
 
-  .attributes-copy-button {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s;
-    position: absolute;
-    right: 0;
-    top: 0;
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-
-    svg {
-      width: 16px;
-      height: 16px;
-      fill: $color-gray-20;
-      transition: fill 0.3s;
-
-      &:hover {
-        fill: $color-primary;
-      }
-    }
-  }
-  
   .attributes-label {
     color: $color-gray-20;
   }
@@ -263,3 +263,61 @@
     border-top: none;
   }
 }
+
+
+.code-block {
+  .code-row-lang {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    margin: 0.5rem;
+
+    &:hover .attributes-copy-button {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    .code-selection {
+      height: 100%;
+      margin: 0;
+      padding: 0.5rem;
+      width: 4.5rem;
+      font-size: $fs12;
+      background: $color-gray-50;
+      color: $color-gray-10;
+      border-radius: 2px;
+      border: 1px solid $color-gray-30;
+      background-image: url("/images/icons/arrow-down-white.svg");
+      background-repeat: no-repeat;
+      background-position: 90% 48%;
+      background-size: 8px;
+    }
+    .attributes-copy-button {
+      margin-top: 8px;
+    }
+  }
+
+  .code-row-display {
+    margin: 0.5rem;
+    font-size: $fs12;
+
+    .code-display {
+      border-radius: 4px;
+      padding: 1rem;
+      overflow: hidden;
+      white-space: pre-wrap;
+      background: $color-gray-60;
+
+      .hljs-attr {
+        color: #a6e22e;
+      }
+      .hljs-comment {
+        color: $color-gray-30;
+      }
+      .hljs-string {
+        color: #66d9ef;
+      }
+    }
+  }
+  
+}