library add

src/blocks/blocks-library/blocks-library.less

@@ -45,4 +45,48 @@
   &__sub-item {}
 
   &__sub-item-title {}
+
+  &__code-wrapper {
+    position: relative;
+  }
+
+  &__code-show-trigger {
+    position: absolute;
+    top: 0;
+    left: -4rem;
+    width: 3rem;
+    height: 3rem;
+    cursor: pointer;
+  }
+
+  &__code-icon {
+    display: block;
+    width: 3rem;
+    height: 0.2rem;
+    background-color: @gray-light;
+
+    &:before,
+    &:after {
+      position: absolute;
+      background-color: @gray-light;
+      width: 3rem;
+      height: 0.2rem;
+      left: 0;
+      content: '';
+    }
+
+    &:before {
+      top: 0.8rem;
+    }
+
+    &:after {
+      top: 1.6rem;
+    }
+  }
+
+  &__code {
+    max-height: 0;
+    overflow: hidden;
+  }
 }
+

src/blocks/highlight/readme.md

 Это не обычный блок. Это компонент, служащий для подсветки синтаксиса в <code>pre>code</code>.
+
+См. [highlightjs.org/download/](https://highlightjs.org/download/)

src/blocks_library.html

@@ -1542,25 +1542,30 @@
         <input type="submit" class="btn  btn--danger" value="Input">
         <button class="btn  btn--danger">Button</button>
       </p>
-    <pre><code>&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;
-&lt;a href="" class="btn"&gt;Cсылка&lt;/a&gt;
-&lt;input type="submit" class="btn" value="Input"&gt;
-&lt;button class="btn"&gt;Button&lt;/button&gt;
-
-&lt;!-- .btn.btn--main --&gt;
-&lt;a href="" class="btn  btn--main"&gt;Cсылка&lt;/a&gt;
-&lt;input type="submit" class="btn  btn--main" value="Input"&gt;
-&lt;button class="btn  btn--main"&gt;Button&lt;/button&gt;
-
-&lt;!-- .btn.btn--success --&gt;
-&lt;a href="" class="btn  btn--success"&gt;Cсылка&lt;/a&gt;
-&lt;input type="submit" class="btn  btn--success" value="Input"&gt;
-&lt;button class="btn  btn--success"&gt;Button&lt;/button&gt;
-
-&lt;!-- .btn.btn--danger --&gt;
-&lt;a href="" class="btn  btn--danger"&gt;Cсылка&lt;/a&gt;
-&lt;input type="submit" class="btn  btn--danger" value="Input"&gt;
-&lt;button class="btn  btn--danger"&gt;Button&lt;/button&gt;</code></pre>
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre>
+            <code class="html">&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;</code>
+            <code class="html"> </code>
+            <code class="html">&lt;a class="btn" href=""&gt;Cсылка&lt;/a&gt;</code>
+            <code class="html">&lt;input class="btn" type="submit" value="Input"&gt;</code>
+            <code class="html">&lt;button class="btn"&gt;Button&lt;/button&gt;</code>
+            <code class="html"> </code>
+            <code class="html">&lt;a class="btn  btn--main" href=""&gt;Cсылка&lt;/a&gt;</code>
+            <code class="html">&lt;input class="btn  btn--main" type="submit" value="Input"&gt;</code>
+            <code class="html">&lt;button class="btn  btn--main"&gt;Button&lt;/button&gt;</code>
+            <code class="html"> </code>
+            <code class="html">&lt;a class="btn  btn--success" href=""&gt;Cсылка&lt;/a&gt;</code>
+            <code class="html">&lt;input class="btn  btn--success" type="submit" value="Input"&gt;</code>
+            <code class="html">&lt;button class="btn  btn--success"&gt;Button&lt;/button&gt;</code>
+            <code class="html"> </code>
+            <code class="html">&lt;a class="btn  btn--danger" href=""&gt;Cсылка&lt;/a&gt;</code>
+            <code class="html">&lt;input class="btn  btn--danger" type="submit" value="Input"&gt;</code>
+            <code class="html">&lt;button class="btn  btn--danger"&gt;Button&lt;/button&gt;</code>
+          </pre>
+        </div>
+      </div>
     </div>
     <div class="blocks-library__sub-item">
       <h2 class="blocks-library__sub-item-title">Увеличение и уменьшение модификаторами</h2>

src/less/global/global-scaffolding.less

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