syntax highlight to block

src/blocks/blocks-library/blocks-library.html

 <!--DEV
 
-<section class="blocks-library__item" data-name="Пояснение сбоку">
+<section class="blocks-library__item" id="" data-name="Пояснение сбоку">
 
-  <h2 class="blocks-library__title" id="">Заголовок</h2>
+  <h1 class="blocks-library__item-title">Раздел</h1>
 
-  Контентю
+  Контент
+
+  <div class="blocks-library__sub-item">
+    <h2 class="blocks-library__sub-item-title">Подраздел</h2>
+
+    Контент
+
+  </div>
 
 </section>
 

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

@@ -46,98 +46,3 @@
 
   &__sub-item-title {}
 }
-
-
-
-.hljs {
-  display: block;
-  width: auto;
-  color: @text-color;
-  background-color: transparent;
-  padding: 0;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #999;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #333;
-  font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: #4f9fcf;
-}
-
-.hljs-string,
-.hljs-doctag {
-  color: #d44950;
-}
-
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: #900;
-  font-weight: bold;
-}
-
-.hljs-subst {
-  font-weight: normal;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #458;
-  font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: #2f6f9f;
-  font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-link {
-  color: #009926;
-}
-
-.hljs-symbol,
-.hljs-bullet {
-  color: #990073;
-}
-
-.hljs-built_in,
-.hljs-builtin-name {
-  color: #0086b3;
-}
-
-.hljs-meta {
-  color: #999;
-  font-weight: bold;
-}
-
-.hljs-deletion {
-  background: #fdd;
-}
-
-.hljs-addition {
-  background: #dfd;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

src/blocks/highlight/highlight.html

+<!--DEV
+
+<pre><code>&lt;input type="text" value="Текстовое поле для сравнения высоты"&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;</code></pre>
+
+-->

src/blocks/highlight/highlight.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.hljs {
+  display: block;
+  width: auto;
+  color: @text-color;
+  background-color: transparent;
+  padding: 0;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #999;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #4f9fcf;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d44950;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #2f6f9f;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

src/blocks/highlight/readme.md

+Это не обычный блок. Это компонент, служащий для подсветки синтаксиса в <code>pre>code</code>.

src/less/style.less

@@ -7,6 +7,8 @@
 @import './src/less/global/global-forms.less';
 @import './src/less/global/global-tables.less';
 
+@import './src/blocks/highlight/highlight.less';
+
 @import './src/blocks/dl-horizontal/dl-horizontal.less';
 @import './src/blocks/blockquote-right/blockquote-right.less';
 @import './src/blocks/blocks-library/blocks-library.less';