How do I display [shortcode] as plain text in Gutenberg

I’m not quite sure I understand what exactly you want to achieve with the shortcode.

If you want the shortcode rendered in the front end but not in the editor, use the Shortcode block.

If you don’t want the shortcode to be rendered at all, put it in the Code block which is meant for showing code samples in posts.

put it in the Code block which is meant for showing code samples in posts.

But that doesn’t always work. Write instead [ this & #091;(without the space). I now use Prismatic for such things and see here and there.

• This reply was modified 4 months, 2 weeks ago by hupe13.
• This reply was modified 4 months, 2 weeks ago by hupe13.

But that doesn’t always work.

@hupe13: That’s interesting. Can you provide an example of a case where the Code block doesn’t work?

Please see in the source code of this page: https://leafext.de/extra/forumtest/

But I’m just realizing that when I edit this example – at some point even that gets misinterpreted. I really searched and tested for a long time until I found my solution with Prismatic. You can use of course any other syntax highlighting plugin, but I don’t know whether every plugin interprets shortcode examples correctly.

Please see in the source code of this page: https://leafext.de/extra/forumtest/

I viewed the page’s HTML source code as suggested.

But I don’t see even a single instance of WordPress’ built-in Code block on that page.

So I have no clue what you’re talking about.

You can use of course any other syntax highlighting plugin, but I don’t know whether every plugin interprets shortcode examples correctly.

Well, the text you quoted and said “doesn’t always work” was never about plugins or syntax highlighting though. Neither was it about “interpreting” shortcodes.

It was about displaying (not rendering or “interpreting”) code snippets with the built-in Code block, which you said “doesn’t always work”. So I was expecting to see a sample block of code that would break the built-in Code block.

But the page you supplied doesn’t even seem to use the Code block at all — though I could be wrong here. I’m really curious to know a test case where the code block would render a shortcode. I’ve even google for a whopping 30 seconds, but couldn’t find any examples.

Okay, I mixed up Code block and inline code. Code block works, but inline code don’t. @normsash asked about “display a shortcode as plain text”, so I think, he would like to use inline code.

And you are right: He should use a Code block. Or the old Enlighter plugin, this can display shortcode as inline code within two brackets: [[...]].

I’m sorry, it appears as if I wasn’t clear in my op about what I want to achieve.

What I would like to do is display [shortcode] as plain inline text, and not have the shortcode rendered. For example, say I have a valid shortcode on my site with the keyword “banner”. Now I want to write some instructions for using that shortcode. Thus, I need to place [banner] inline within the paragraph context (just like in this paragraph).

But when I do that on a site where [banner] is a valid shortcode, it gets rendered every place where it is put.

I can’t use the shortcode or code blocks because they still render the shortcode, and in the case of the shortcode block, it’s not rendered inline.

The only solution that I’ve found is to put a space character on either side of the shortcode name, like [ banner ]. But that could be interpreted wrong by the reader unless I put in a disclaimer to eliminate the spaces if they are actually going to use the shortcode.

Hopefully that explains better my objective.

Sometimes I think far too complicated, sorry. Write simple two brackets (as inline code or not): [ [ b a n n e r ] ] without spaces. This editor is terrible.

• This reply was modified 4 months, 2 weeks ago by hupe13.
• This reply was modified 4 months, 2 weeks ago by hupe13.

Thanks @hupe13 … but yeah, I’ve tried xxx and formatting as in-line code. Neither of them work. Both of those forms still render the shortcode. The only thing I’ve found to not render the shortcode is to put it in a separate code block (which isn’t inline) or to surround the shortcode keyword with spaces.

Does the xxx format work for you inline? Are you using the Enlighter plugin that you mentioned earlier in order to do this?

Edit: I just noticed that the double bracket [[ format actually just makes a link of the text to the wordpress codex… like this which is formatted with the [[ format: xxx And then it removes the brackets so it ends up not being displayed as a [shortcode] text at all.

• This reply was modified 4 months, 2 weeks ago by Norm Sash.

Only thing I’ve been able to get to work (somewhat) is to select the keywork that is inside the brackets and then format that as inline code. Don’t include the brackets as part of the inline code. Or use backticks to surround the keyword, which should be the same as formatting the keyword as inline code.

With that it highlights the keyword, but not the brackets. And it doesn’t render the shortcode. Not exactly the same as just putting a plain text non-rendered shortcode in the text (like what shows in this thread earlier) but at least it doesn’t render.

This I mean with “This editor is terrible”, the editor here in the forum.

How can I display the shortcode as text?

Two opening brackets before and at the end two closing brackets. It should display the shortcode instead of rendering it. You can write it as normal text or as inline code.

If you would highligt some code, you should use a syntax highlighting plugin. I use the two above. Enlighter knows inline code, Prismatic does not.

This editor is terrible.

This I mean with “This editor is terrible”, the editor here in the forum.

It’s a feature, not a bug ?? See below.

And note that you can completely disable the block editor here in the support forums, from your forum user profile page:

Edit: I just noticed that the double bracket [[ format actually just makes a link of the text to the wordpress codex… like this which is formatted with the [[ format: xxx And then it removes the brackets so it ends up not being displayed as a [shortcode] text at all.

This is the support forum, there are no user shortcodes to render here.

So the nested brackets serve a different purpose suited to the support forum: automagically link to the appropriate support article for the enclosed text, Wikepedia-style. (The old codex.www.remarpro.com site was built with MediaWiki, the software that powers Wikipedia — and it seems the forum code hasn’t been re-factored to link to the new developer resource yet.)

Does the xxx format work for you inline?

If you mean the nested brackets like banner, then as @hupe13 has mentioned already, this should work out of the box: no plugin or even the inline code feature is needed. If it’s not working for you, then something in your environment must be breaking this built-in WordPress feature.

I just tested this myself with multiple plugins, and every single one of them worked out of the box. Placing the nested bracket inside the inline code feature can help with CSS styling, but the inline code bit is not needed at all.

Here’s a test page, showing shortcodes from 6 different plugins. First, I display the raw shortcode inline using the nested brackets. Then I render the shortcode. Here’s the live URL: https://agreewish.s2-tastewp.com/

And below is a screenshot (just in case TasteWP disables the test site). I’m also including the dashboard view below to show I’m using the standard Paragraph block, nothing fancy.