tabler/src/pages/_includes/example.html

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

{% 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>

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

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

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

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