Добавил специальную разметку для фрагментов кода

src/blocks/code/code.html

+<!--DEV
+
+<pre class="code">
+  <code class="css">
+    <span class="code__line">/* Родитель: */</span>
+    <span class="code__line">.block-name {</span>
+    <span class="code__line">  display: flex;</span>
+    <span class="code__line">  flex-wrap: wrap;</span>
+    <span class="code__line">  margin-left: -1.5rem;</span>
+    <span class="code__line">  margin-right: -1.5rem;</span>
+    <span class="code__line">}</span>
+  </code>
+</pre>
+
+-->

src/blocks/code/code.less

+// Для импорта в диспетчер подключений: @import './src/blocks/code/code.less';
+
+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.code {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  background-color: @gray-lightest;
+  padding: 1em;
+  border-radius: @border-radius;
+  border: 1px solid @gray-lighter;
+  white-space: normal;
+  tab-size: 2;
+
+  &__line {
+    display: block;
+    white-space: pre;
+  }
+}

src/less/global/global-scaffolding.less

@@ -309,11 +309,4 @@ pre {
   border: 1px solid @gray-lighter;
   white-space: normal;
   tab-size: 2;
-
-  code {
-    display: block;
-    padding: 0;
-    background-color: transparent;
-    white-space: pre;
-  }
 }

src/less/style.less

@@ -59,3 +59,4 @@
 @import './src/blocks/alert/alert__close.less';
 @import './src/blocks/alert-area/alert-area.less';
 @import './src/blocks/loader/loader.less';
+@import './src/blocks/code/code.less';