Use Jekyll's markdownify filter instead of a custom plugin (#25319)

5 files changed, 28 insertions, 51 deletions

diff --git a/_plugins/markdown-block.rb b/_plugins/markdown-block.rb
deleted file mode 100644
index f9f1531b5..000000000
--- a/_plugins/markdown-block.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-module Jekyll
-  class MarkdownBlock < Liquid::Block
-    alias_method :render_block, :render
-
-    def initialize(tag_name, markup, tokens)
-      super
-    end
-
-    # Uses the default Jekyll markdown parser to
-    # parse the contents of this block
-    #
-    def render(context)
-      site = context.registers[:site]
-      converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
-      converter.convert(render_block(context))
-    end
-  end
-end
-
-Liquid::Template.register_tag('markdown', Jekyll::MarkdownBlock)
diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index de6dc23a3..cb522e50a 100644
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -63,37 +63,37 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
   <tbody>
     <tr>
       <td>
-        {% markdown %}`<h1></h1>`{% endmarkdown %}
+        {{ "`<h1></h1>`" | markdownify }}
       </td>
       <td><span class="h1">h1. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h2></h2>`{% endmarkdown %}
+        {{ "`<h2></h2>`" | markdownify }}
       </td>
       <td><span class="h2">h2. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h3></h3>`{% endmarkdown %}
+        {{ "`<h3></h3>`" | markdownify }}
       </td>
       <td><span class="h3">h3. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h4></h4>`{% endmarkdown %}
+        {{ "`<h4></h4>`" | markdownify }}
       </td>
       <td><span class="h4">h4. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h5></h5>`{% endmarkdown %}
+        {{ "`<h5></h5>`" | markdownify }}
       </td>
       <td><span class="h5">h5. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h6></h6>`{% endmarkdown %}
+        {{ "`<h6></h6>`" | markdownify }}
       </td>
       <td><span class="h6">h6. Bootstrap heading</span></td>
     </tr>
@@ -105,7 +105,7 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
 All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
 
 <div class="bd-example">
-{% markdown %}
+{% capture markdown %}
 * Lorem ipsum dolor sit amet
 * Consectetur adipiscing elit
 * Integer molestie lorem at massa
@@ -127,23 +127,22 @@ All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `
 6. Faucibus porta lacus fringilla vel
 7. Aenean sit amet erat nunc
 8. Eget porttitor lorem
-{% endmarkdown %}
+{% endcapture %}
+{{ markdown | markdownify }}
 </div>
 
 For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
 
 <div class="bd-example">
-{% markdown %}
-<dl>
-  <dt>Description lists</dt>
-  <dd>A description list is perfect for defining terms.</dd>
-  <dt>Euismod</dt>
-  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
-  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-  <dt>Malesuada porta</dt>
-  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-</dl>
-{% endmarkdown %}
+  <dl>
+    <dt>Description lists</dt>
+    <dd>A description list is perfect for defining terms.</dd>
+    <dt>Euismod</dt>
+    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+    <dt>Malesuada porta</dt>
+    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+  </dl>
 </div>
 
 ## Preformatted text
@@ -151,13 +150,11 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
 The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
 
 <div class="bd-example">
-{% markdown %}
 <pre>
 .example-element {
   margin-bottom: 1rem;
 }
 </pre>
-{% endmarkdown %}
 </div>
 
 ## Tables
@@ -363,4 +360,4 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
 {% endcallout %}
 
-To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
\ No newline at end of file
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
diff --git a/docs/4.0/content/typography.md b/docs/4.0/content/typography.md
index 53634509f..c8c9ccf3c 100644
--- a/docs/4.0/content/typography.md
+++ b/docs/4.0/content/typography.md
@@ -32,37 +32,37 @@ All HTML headings, `<h1>` through `<h6>`, are available.
   <tbody>
     <tr>
       <td>
-        {% markdown %}`<h1></h1>`{% endmarkdown %}
+        {{ "`<h1></h1>`" | markdownify }}
       </td>
       <td><span class="h1">h1. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h2></h2>`{% endmarkdown %}
+        {{ "`<h2></h2>`" | markdownify }}
       </td>
       <td><span class="h2">h2. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h3></h3>`{% endmarkdown %}
+        {{ "`<h3></h3>`" | markdownify }}
       </td>
       <td><span class="h3">h3. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h4></h4>`{% endmarkdown %}
+        {{ "`<h4></h4>`" | markdownify }}
       </td>
       <td><span class="h4">h4. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h5></h5>`{% endmarkdown %}
+        {{ "`<h5></h5>`" | markdownify }}
       </td>
       <td><span class="h5">h5. Bootstrap heading</span></td>
     </tr>
     <tr>
       <td>
-        {% markdown %}`<h6></h6>`{% endmarkdown %}
+        {{ "`<h6></h6>`" | markdownify }}
       </td>
       <td><span class="h6">h6. Bootstrap heading</span></td>
     </tr>
diff --git a/docs/4.0/getting-started/introduction.md b/docs/4.0/getting-started/introduction.md
index 6a2428704..48e6dc549 100644
--- a/docs/4.0/getting-started/introduction.md
+++ b/docs/4.0/getting-started/introduction.md
@@ -39,7 +39,7 @@ Curious which components explicitly require jQuery, our JS, and Popper.js? Click
 
 <details>
 <summary class="text-primary mb-3">Show components requiring JavaScript</summary>
-{% markdown %}
+{% capture markdown %}
 - Alerts for dismissing
 - Buttons for toggling states and checkbox/radio functionality
 - Carousel for all slide behaviors, controls, and indicators
@@ -49,7 +49,8 @@ Curious which components explicitly require jQuery, our JS, and Popper.js? Click
 - Navbar for extending our Collapse plugin to implement responsive behavior
 - Tooltips and popovers for displaying and positioning (also requires [Popper.js](https://popper.js.org/))
 - Scrollspy for scroll behavior and navigation updates
-{% endmarkdown %}
+{% endcapture %}
+{{ markdown | markdownify }}
 </details>
 
 ## Starter template
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index 343765f86..56d05417d 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -313,7 +313,6 @@ Our documentation received an upgrade across the board as well. Here's the low d
   - `bugify.rb` is used to efficiently list out the entries on our [browser bugs]({{ site.baseurl }}/docs/{{ site.docs_version }}/browser-bugs/) page.
   - `example.rb` is a custom fork of the default `highlight.rb` plugin, allowing for easier example-code handling.
   - `callout.rb` is a similar custom fork of that, but designed for our special docs callouts.
-  - `markdown-block.rb` is used to to render Markdown snippets within HTML elements like tables.
   - [jekyll-toc](https://github.com/toshimaru/jekyll-toc) is used to generate our table of contents.
 - All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
 - Pages have been reorganized for simpler content and a more approachable hierarchy.