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

site/content/docs/5.0/components/collapse.md

@@ -10,9 +10,9 @@ toc: true
 
 The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
 
-{{< callout info >}}
+{{% callout info %}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
-{{< /callout >}}
+{{% /callout %}}
 
 ## Example
 
@@ -187,9 +187,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 ### Methods
 
-{{< callout danger >}}
+{{% callout danger %}}
 {{< partial "callout-danger-async-methods.md" >}}
-{{< /callout >}}
+{{% /callout %}}
 
 Activates your content as a collapsible element. Accepts an optional options `object`.