Shortcodes
Normally when a shortcode is used, it would trigger the WordPress magic that makes a shortcode a short code:
Now, if we wanted to show what shortcode was used to make that magic happen, we simply need to escape it like so:
[[expand title=”trigger”]content[/expand]]
and that renders:
[expand title="trigger"]content[/expand]
we can even wrap it in a nice code tag to set it apart:
[expand title="trigger"]content[/expand]
so far so good.
HTML
Now lets say we want to escape a bit of HTML! Well, lets first try simply wrapping it in the code tag:
- item 1
- item 2
- item 3
Hmm… no good. All that seems to have done is render the HTML in the special css of a code tag.
What about using Markdown! Let’s wrap the HTML in backticks and see what happens…
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Perfect! It even added that monospace font that makes code look even more code-like.
Now for the test…
Shortcode and HTML
Since we are using HTML we need to use Markup… what happens when we add in the shortcode?
<ul>
<li>item 1</li>
<li>item 2
<li>item 3</li>
</ul>
The HTML looks rockin’ but the shortcode… well that was just processed as normal. Hmm… lets try doing the double bracket thing:
<ul>
<li>item 1</li>
<li>item 2 [expand title="trigger"]content[/expand]</li>
<li>item 3</li>
</ul>
Wow! that totally worked. So there you have it: Problem solved!