Remove custom example plugin. (#25784)

4 files changed, 96 insertions, 64 deletions

diff --git a/docs/4.0/content/code.md b/docs/4.0/content/code.md
index 29e66d52f..d1ce12ccd 100644
--- a/docs/4.0/content/code.md
+++ b/docs/4.0/content/code.md
@@ -10,41 +10,46 @@ toc: true
 
 Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
 
-{% example html %}
+{% capture example %}
 For example, <code>&lt;section&gt;</code> should be wrapped as inline.
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Code blocks
 
 Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
 
-{% example html %}
+{% capture example %}
 <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
 &lt;p&gt;And another line of sample text here...&lt;/p&gt;
 </code></pre>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Variables
 
 For indicating variables use the `<var>` tag.
 
-{% example html %}
+{% capture example %}
 <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## User input
 
 Use the `<kbd>` to indicate input that is typically entered via keyboard.
 
-{% example html %}
+{% capture example %}
 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
 To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Sample output
 
 For indicating sample output from a program use the `<samp>` tag.
 
-{% example html %}
+{% capture example %}
 <samp>This text is meant to be treated as sample output from a computer program.</samp>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
diff --git a/docs/4.0/content/figures.md b/docs/4.0/content/figures.md
index 31e89edfe..7041997ba 100644
--- a/docs/4.0/content/figures.md
+++ b/docs/4.0/content/figures.md
@@ -9,18 +9,20 @@ Anytime you need to display a piece of content—like an image with an optional
 
 Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
 
-{% example html %}
+{% capture example %}
 <figure class="figure">
   <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
   <figcaption class="figure-caption">A caption for the above image.</figcaption>
 </figure>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment).
 
-{% example html %}
+{% capture example %}
 <figure class="figure">
   <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
   <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
 </figure>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
diff --git a/docs/4.0/content/tables.md b/docs/4.0/content/tables.md
index 8be2ba252..d5de8049f 100644
--- a/docs/4.0/content/tables.md
+++ b/docs/4.0/content/tables.md
@@ -12,7 +12,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
 
 Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent.
 
-{% example html %}
+{% capture example %}
 <table class="table">
   <thead>
     <tr>
@@ -43,11 +43,12 @@ Using the most basic table markup, here's how `.table`-based tables look in Boot
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 You can also invert the colors—with light text on dark backgrounds—with `.table-dark`.
 
-{% example html %}
+{% capture example %}
 <table class="table table-dark">
   <thead>
     <tr>
@@ -78,13 +79,14 @@ You can also invert the colors—with light text on dark backgrounds—with `.ta
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Table head options
 
 Similar to tables and dark tables, use the modifier classes `.thead-light` or `.thead-dark` to make `<thead>`s appear light or dark gray.
 
-{% example html %}
+{% capture example %}
 <table class="table">
   <thead class="thead-dark">
     <tr>
@@ -146,13 +148,14 @@ Similar to tables and dark tables, use the modifier classes `.thead-light` or `.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Striped rows
 
 Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
 
-{% example html %}
+{% capture example %}
 <table class="table table-striped">
   <thead>
     <tr>
@@ -183,9 +186,10 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <table class="table table-striped table-dark">
   <thead>
     <tr>
@@ -216,13 +220,14 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Bordered table
 
 Add `.table-bordered` for borders on all sides of the table and cells.
 
-{% example html %}
+{% capture example %}
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -252,9 +257,10 @@ Add `.table-bordered` for borders on all sides of the table and cells.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <table class="table table-bordered table-dark">
   <thead>
     <tr>
@@ -284,13 +290,14 @@ Add `.table-bordered` for borders on all sides of the table and cells.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Borderless table
 
 Add `.table-borderless` for a table without borders.
 
-{% example html %}
+{% capture example %}
 <table class="table table-borderless">
   <thead>
     <tr>
@@ -320,11 +327,12 @@ Add `.table-borderless` for a table without borders.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 `.table-borderless` can also be used on dark tables.
 
-{% example html %}
+{% capture example %}
 <table class="table table-borderless table-dark">
   <thead>
     <tr>
@@ -354,13 +362,14 @@ Add `.table-borderless` for a table without borders.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Hoverable rows
 
 Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
 
-{% example html %}
+{% capture example %}
 <table class="table table-hover">
   <thead>
     <tr>
@@ -390,9 +399,10 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <table class="table table-hover table-dark">
   <thead>
     <tr>
@@ -422,13 +432,14 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Small table
 
 Add `.table-sm` to make tables more compact by cutting cell padding in half.
 
-{% example html %}
+{% capture example %}
 <table class="table table-sm">
   <thead>
     <tr>
@@ -458,9 +469,10 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <table class="table table-sm table-dark">
   <thead>
     <tr>
@@ -490,7 +502,8 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Contextual classes
 
@@ -630,7 +643,7 @@ Create responsive tables by wrapping any `.table` with `.table-responsive{-sm|-m
 
 A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
 
-{% example html %}
+{% capture example %}
 <table class="table">
   <caption>List of users</caption>
   <thead>
@@ -662,7 +675,8 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
     </tr>
   </tbody>
 </table>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Responsive tables
 
diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md
index c8c9ccf3c..795f807b6 100644
--- a/docs/4.0/content/typography.md
+++ b/docs/4.0/content/typography.md
@@ -80,14 +80,15 @@ All HTML headings, `<h1>` through `<h6>`, are available.
 
 `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
 
-{% example html %}
+{% capture example %}
 <p class="h1">h1. Bootstrap heading</p>
 <p class="h2">h2. Bootstrap heading</p>
 <p class="h3">h3. Bootstrap heading</p>
 <p class="h4">h4. Bootstrap heading</p>
 <p class="h5">h5. Bootstrap heading</p>
 <p class="h6">h6. Bootstrap heading</p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Customizing headings
 
@@ -141,17 +142,18 @@ Traditional heading elements are designed to work best in the meat of your page
 
 Make a paragraph stand out by adding `.lead`.
 
-{% example html %}
+{% capture example %}
 <p class="lead">
   Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
 </p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Inline text elements
 
 Styling for common inline HTML5 elements.
 
-{% example html %}
+{% capture example %}
 <p>You can use the mark tag to <mark>highlight</mark> text.</p>
 <p><del>This line of text is meant to be treated as deleted text.</del></p>
 <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
@@ -160,7 +162,8 @@ Styling for common inline HTML5 elements.
 <p><small>This line of text is meant to be treated as fine print.</small></p>
 <p><strong>This line rendered as bold text.</strong></p>
 <p><em>This line rendered as italicized text.</em></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 `.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring.
 
@@ -176,49 +179,54 @@ Stylized implementation of HTML's `<abbr>` element for abbreviations and acronym
 
 Add `.initialism` to an abbreviation for a slightly smaller font-size.
 
-{% example html %}
+{% capture example %}
 <p><abbr title="attribute">attr</abbr></p>
 <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Blockquotes
 
 For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
 
-{% example html %}
+{% capture example %}
 <blockquote class="blockquote">
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Naming a source
 
 Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the name of the source work in `<cite>`.
 
-{% example html %}
+{% capture example %}
 <blockquote class="blockquote">
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Alignment
 
 Use text utilities as needed to change the alignment of your blockquote.
 
-{% example html %}
+{% capture example %}
 <blockquote class="blockquote text-center">
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <blockquote class="blockquote text-right">
   <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Lists
 
@@ -226,7 +234,7 @@ Use text utilities as needed to change the alignment of your blockquote.
 
 Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
 
-{% example html %}
+{% capture example %}
 <ul class="list-unstyled">
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
@@ -244,25 +252,27 @@ Remove the default `list-style` and left margin on list items (immediate childre
   <li>Aenean sit amet erat nunc</li>
   <li>Eget porttitor lorem</li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Inline
 
 Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
 
-{% example html %}
+{% capture example %}
 <ul class="list-inline">
   <li class="list-inline-item">Lorem ipsum</li>
   <li class="list-inline-item">Phasellus iaculis</li>
   <li class="list-inline-item">Nulla volutpat</li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Description list alignment
 
 Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
 
-{% example html %}
+{% capture example %}
 <dl class="row">
   <dt class="col-sm-3">Description lists</dt>
   <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
@@ -287,7 +297,8 @@ Align terms and descriptions horizontally by using our grid system's predefined
     </dl>
   </dd>
 </dl>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Responsive typography