This tutorial will be short and sweet. 🍬 A few people have asked me how to do this over the years and so I thought I would share it, as it can come in handy. Especially for those of you who are technical bloggers and writers. Follow the steps below on how to show code and shortcodes in WordPress without executing them (or displaying them).
As a blogger and technical writer, I share a lot of code and shortcodes in my posts (not just use, but share the raw code). One of the problems I have run into over the years is that if I try to share certain code, such as certain HTML, or a shortcode, WordPress by default will render the code, even if you're using the built-in <pre> and <code> tags. Some of the following can be done with syntax highlight plugins, but even some of those I tried had issues.
One simple solution if you're in a rush is just to use a public Gist and embed it in your post. However, I'm not a big fan of external scripts.
For example, if you take the following code right now and enter this into your WordPress editor, the only thing that will be left is a couple words.
It might seem a little confusing at first, but once you give it a try it makes more sense.
Sharing shortcodes without them executing or displaying is actually a lot easier. You can simply add another bracket on each end.
If you enter [[shortcode]] it will display as [shortcode].
That's a really nice and useful tip Brian, will be sure to pass it along, cheers!
Thanks Steven, glad it was helpful.