bem-md-renderer/test/test.html

The builder markdown to html with custom renderer, which generates the html headlines like github

<h1 id="bemhtml-шаблонизатор-для-БЭМ"><a href="#bemhtml-шаблонизатор-для-БЭМ" class="anchor"></a>BEMHTML: шаблонизатор для БЭМ</h1>
<p><iframe src="//www.youtube.com/embed/1GWoMnYldYc" width="560" height="315" frameborder="0" allowfullscreen></iframe></p>
<p><strong>BEMHTML</strong> — шаблонизатор (шаблонный движок) для тех, кто ведет веб-разработку в рамках <a href="https://ru.bem.info/method">БЭМ-методологии</a>.
BEMHTML — это:</p>
<ul>
<li>HTML-верстка в терминах блоков, элементов, модификаторов;</li>
<li>поддержка CSS в стиле БЭМ;</li>
</ul>
<h2 id="bemhtml-картина-мира"><a href="#bemhtml-картина-мира" class="anchor"></a>BEMHTML: картина мира</h2>
<p>Этот принцип не специфичен для веб-разработки и вряд ли вызовет возражения. Тем не менее, технологические особенности многих шаблонизаторов нередко вынуждают дублировать код. Это проявляется во всех ситуациях, когда один и тот же элемент интерфейса (например, кнопка) используется многократно. В большинстве шаблонизаторов HTML-код, описывающий кнопку, придется повторить на всех страницах, где она используется. Когда кнопку потребуется усложнить, разработчику придется отредактировать шаблоны всех страниц, где она присутствует. Даже если шаблонизатор позволяет вынести код кнопки в общую функцию, на всех страницах нужно будет заменить код кнопки вызовом этой функции.</p>
<p><strong>Задача шаблонизатора: возможность создания гибких библиотек шаблонов</strong>.</p>
<h3 id="БЭМ-головного-мозга"><a href="#БЭМ-головного-мозга" class="anchor"></a>«БЭМ головного мозга»</h3>
<p>BEMHTML представляет собой распространение БЭМ-методологии на еще одну технологию — HTML. БЭМ предлагает дизайнеру, разработчику интерфейса, JavaScript-программисту работать в терминах единой предметной области — блоков, элементов, модификаторов. BEMHTML позволяет HTML-верстальщику присоединиться к ним.</p>
<h4 id="Примеры"><a href="#Примеры" class="anchor"></a>Примеры</h4>
<p>Данные (БЭМ-дерево), которые шаблонизатор принимает на вход:</p>
<pre><code class="lang-js">{
  block: &#39;widgets&#39;,
  content: [
    {
      elem: &#39;weather&#39;,
      content: 4
    }
  ]
}
</code></pre>