example.html

{% assign demo-code = code %}
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}

<div class="example no_toc_section{% if include.centered %} example-centered{% endif %}{% if include.columns or include.light %} example-bg{% endif %}">
	<div class="example-content">
		{% if include.max-width %}<div style="max-width: {{ include.max-width }}">{% endif %}
		{% if include.columns %}<div class="example-column example-column-{{ include.columns }}">{% endif %}
		{% if include.modal %}<div class="example-modal-backdrop"></div>{% endif %}
		{% if include.wrapper %}<div class="{{ include.wrapper }}">{% endif %}

		{{ demo-code }}

		{% if include.wrapper %}</div>{% endif %}
		{% if include.columns %}</div>{% endif %}
		{% if include.max-width %}</div>{% endif %}
	</div>
</div>


{% capture html %}
{{ code }}

{% removeemptylines %}
{{ site.captured_global.scripts | last }}
{% endremoveemptylines %}
{% endcapture %}

{% assign html = html | strip %}
{% assign html = html | replace_regex: '// @formatter:(off|on)', '' %}

{% capture new_line %}
{% endcapture %}
{% assign html = html | replace_regex: "\n\n+", new_line %}

{% unless include.show-svg %}
{% assign html = html | replace_regex: '<svg[^>]*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '<!-- SVG icon code with class="\1" -->' %}
{% assign html = html | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
{% endunless %}

{% assign html = html | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
{% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %}
{% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
{% assign html = html | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %}

{% assign html = html | htmlbeautifier %}

<div class="example-code">
	{% highlight html %}{{ html }}{% endhighlight %}
</div>