Improve callout shortcode. (#31802)

Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.

This allows for stuff like:

{{% callout info %}}
##### I'm an info callout!

```css
.foo {
  color: #fff;
}
```

{{< 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="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}

4 files changed, 8 insertions, 8 deletions

diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md
index ae89f5ee34..fe99828eac 100644
--- a/site/content/docs/5.0/forms/checks-radios.md
+++ b/site/content/docs/5.0/forms/checks-radios.md
@@ -232,9 +232,9 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
 <label class="btn btn-primary" for="btn-check-3">Disabled</label>
 {{< /example >}}
 
-{{< callout info >}}
+{{% callout info %}}
 Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
-{{< /callout >}}
+{{% /callout %}}
 
 ### Radio toggle buttons
 
diff --git a/site/content/docs/5.0/forms/file.md b/site/content/docs/5.0/forms/file.md
index 466e7b0950..7222b70590 100644
--- a/site/content/docs/5.0/forms/file.md
+++ b/site/content/docs/5.0/forms/file.md
@@ -6,9 +6,9 @@ group: forms
 toc: true
 ---
 
-{{< callout info >}}
+{{% callout info %}}
 The recommended plugin to animate custom file inputs is [bs-custom-file-input](https://www.npmjs.com/package/bs-custom-file-input); it's what we use here in our docs.
-{{< /callout >}}
+{{% /callout %}}
 
 ## Default
 
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md
index a181c34dd4..3e2cbc2bcf 100644
--- a/site/content/docs/5.0/forms/overview.md
+++ b/site/content/docs/5.0/forms/overview.md
@@ -55,11 +55,11 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
 
 Block-level or inline-level form text can be created using `.form-text`.
 
-{{< callout warning >}}
+{{% callout warning %}}
 ##### Associating form text with form controls
 
 Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
-{{< /callout >}}
+{{% /callout %}}
 
 Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
 
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 65b8652031..86c977bb29 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -9,9 +9,9 @@ extra_js:
     async: true
 ---
 
-{{< callout warning >}}
+{{% callout warning %}}
 We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we'd recommend either using the server-side option or the default browser validation method.
-{{< /callout >}}
+{{% /callout %}}
 
 ## How it works