I dont want to show shortcode in <pre> tag

I have a theme and I want to show vistors how shortcode format is in <pre> tag. But when I add shortcode in <pre>, it shows what shortcode does. I just want to show shortcode format in plain text. How to do that?

Solutions Collecting From Web of "I dont want to show shortcode in <pre> tag"

A) If you want to show the shortcode syntax you can try to write it with double brackets in the editor:

<pre>[[shortcode foo="bar"]]</pre>

It will then display as

<pre>[shortcode foo="bar"]</pre>

on your frontend and it will not activate the shortcode callback.

B) Or if you want some extra formatting, you could define your own pretty format via shortcode:

function pretty_shortcode( $atts, $content ) 
    $atts = shortcode_atts( 
                array( 'class => 'pretty_shortcode' ), 

    // input
    $content           = wp_kses( $content, array() );
    $atts['class']     = esc_attr( $atts['class'] );

    // output                       
    return sprintf( '<pre class="%s">%s</pre>', $atts['class'], $content );             

add_shortcode( 'pretty_shortcode', 'pretty_shortcode' );   

You would then write for example this in your editor:

[pretty_shortcode class="pretty"]
    [gallery ids="123,321" link="file"]

and the output would be:

<pre class="pretty">
    [gallery ids="123,321" link="file"]