I dont want to show shortcode in <pre> tag

2 comments

1. 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' ), 
                   $atts, 
                   '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"]
   [/pretty_shortcode]
   

   and the output would be:

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

2. A more crazy but reliable workaround. You can paste the invisible space char ­ after the first bracket. I use that approach to workaround a lot of rendering problems when presenting code. In javascipt the syntax model is:

   content = content.replace('[', '[' + String.fromCharCode('173'));
   

   The tricky part is to grab the character in unicode format and paste in PHP protocol. Otherwise the ­ ­ will be rendered or converted into a - hyphen. The char is invisible for the cursor, so you cant select it alone. However, just produce it once with javascript and copy the [g part and paste/ replace in the editor.

   You can use the same trick to always use element without captions, in wordpress, by pasting a invisible space as caption on single images.

   Here is the shortcode with the space. Paste in your wordpress editor and back-delete each char. After the g the cursor stops, before contiune with deleteing the bracket…

   [­gallery link="none"]
   

   Note, if you see - instead, your encoding is wrong or the information got broken in the copy by your device. ­­­­­

Comments are closed.