bemhtml example

github.com/bem/bem-core bem.info

HTML

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="https://cdn.rawgit.com/beautify-web/js-beautify/master/js/lib/beautify-html.js"></script>
<link rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css">
<script src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js"></script>
<pre class="prettyprint lang-html"></pre>

JavaScript

modules.require(['BEMHTML'], BEMHTML => {

// —————————————————————————————————
// !BEMHTML
BEMHTML.compile(function() {
	debugger;
	block('my-form')(
  	tag()('form'),
    content()(() => [
    	{tag: 'label', attrs: { for: 'age' }},
      {tag: 'input', attrs: {
      	type: 'number', id: 'age'}},
      {block: 'button', mix: {elem: 'submit'}}
    ])
  );
});
// /!BEMHTML
// —————————————————————————————————

$('pre').text((html_beautify(BEMHTML.apply(

// —————————————————————————————————
// !BEMJSON
{
	block: 'page',
  content: [{
    block: 'my-form'
  }]
}
// /!BEMJSON
// —————————————————————————————————

), {
  indent_size: 2,
  wrap_attributes: "force",
  indent_scripts: "separate",
  unformatted: 'a span img address h1 h2 h3 h4 h5 h6 dfn code samp kbd var cite abbr acronym strong sub sup tt big small strike font ins del pre address dt q i b u s bdo em'.split(' ')
  })));

$('.prettyprinted').removeClass('prettyprinted');
PR.prettyPrint();
});