Remove custom example plugin. (#25784)

_includes/example.html

@@ -0,0 +1,23 @@
+{%- comment -%}
+Usage: {% include example.html content=markup %},
+where content is a capture with the HTML content
+id - null (default)
+class - "bd-example" (default)
+optional: hide_preview - disabled (default)
+optional: hide_markup - disabled (default)
+{%- endcomment -%}
+
+{%- assign preview_id = include.id -%}
+{%- assign preview_class = include.class -%}
+
+{%- if include.hide_preview == null -%}
+<div{% if preview_id %} id="{{ preview_id }}"{% endif %} class="bd-example{% if preview_class %} {{ preview_class }}{% endif %}">
+  {{- include.content -}}
+</div>
+{%- endif -%}
+
+{%- if include.hide_markup == null -%}
+  {%- highlight html -%}
+    {{- include.content | replace: 'data-src="holder.js', 'src="...' -}}
+  {%- endhighlight -%}
+{%- endif -%}

docs/4.0/components/alerts.md

@@ -10,38 +10,41 @@ toc: true
 
 Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <div class="alert alert-{{ color.name }}" role="alert">
   A simple {{ color.name }} alert—check it out!
 </div>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% include callout-warning-color-assistive-technologies.md %}
 
 ### Link color
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <div class="alert alert-{{ color.name }}" role="alert">
   A simple {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
 </div>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Additional content
 
 Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
-{% example html %}
+{% capture example %}
 <div class="alert alert-success" role="alert">
   <h4 class="alert-heading">Well done!</h4>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
   <hr>
   <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 
 ### Dismissing
@@ -56,14 +59,15 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 
 You can see this in action with a live demo:
 
-{% example html %}
+{% capture example %}
 <div class="alert alert-warning alert-dismissible fade show" role="alert">
   <strong>Holy guacamole!</strong> You should check in on some of those fields below.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## JavaScript behavior
 

docs/4.0/components/badge.md

@@ -30,48 +30,53 @@ Badges scale to match the size of the immediate parent element by using relative
 
 Badges can be used as part of links or buttons to provide a counter.
 
-{% example html %}
+{% capture example %}
 <button type="button" class="btn btn-primary">
   Notifications <span class="badge badge-light">4</span>
 </button>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
 
 Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
 
-{% example html %}
+{% capture example %}
 <button type="button" class="btn btn-primary">
   Profile <span class="badge badge-light">9</span>
   <span class="sr-only">unread messages</span>
 </button>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Contextual variations
 
 Add any of the below mentioned modifier classes to change the appearance of a badge.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% include callout-warning-color-assistive-technologies.md %}
 
 ## Pill badges
 
 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Links
 
 Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}

docs/4.0/components/breadcrumb.md

@@ -9,7 +9,7 @@ group: components
 
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
 
-{% example html %}
+{% capture example %}
 <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
     <li class="breadcrumb-item active" aria-current="page">Home</li>
@@ -30,7 +30,8 @@ Separators are automatically added in CSS through [`::before`](https://developer
     <li class="breadcrumb-item active" aria-current="page">Data</li>
   </ol>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Accessibility
 

docs/4.0/components/button-group.md

@@ -10,13 +10,14 @@ toc: true
 
 Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).
 
-{% example html %}
+{% capture example %}
 <div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-secondary">Left</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Right</button>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% capture callout %}
 ##### Ensure correct `role` and provide a label
@@ -31,7 +32,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
 
-{% example html %}
+{% capture example %}
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group mr-2" role="group" aria-label="First group">
     <button type="button" class="btn btn-secondary">1</button>
@@ -48,11 +49,12 @@ Combine sets of button groups into button toolbars for more complex components.
     <button type="button" class="btn btn-secondary">8</button>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
 
-{% example html %}
+{% capture example %}
 <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group mr-2" role="group" aria-label="First group">
     <button type="button" class="btn btn-secondary">1</button>
@@ -82,7 +84,8 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
     <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Sizing
 
@@ -118,7 +121,7 @@ Instead of applying button sizing classes to every button in a group, just add `
 
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
-{% example html %}
+{% capture example %}
 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
   <button type="button" class="btn btn-secondary">1</button>
   <button type="button" class="btn btn-secondary">2</button>
@@ -133,7 +136,8 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Vertical variation