Showing code examples in WordPress posts

Very  brief post here, I’ve just spent literally 3 hours writing my last post – trying to show examples of the wordpress php and css I used to create a custom horizontal menu.

There are many great plugins out there that help you show code in your posts.  I specifically needed something that:

  • can be used in the Visual side of the WYSIWYG
  • can survive flipping back and forth between HTML and Visual without losing code or format
  • can handle <?php wp_nav_menu($args); ?>

The plugin that can do this, after 3 hours of trying various options, is SyntaxHighlighter Evolved.

With this plugin activated, I just paste my code within [code][/code] tags – right in the Visual editor.

Some finicky things I noticed:

  • If there are any blank lines in your code, you will end up with extra <div>, <br>, <p> tags that don’t belong
  • If you have code that is on two lines, but separated by a blank line – the display will number 3 lines of code.  To fix this, go into the HTML side of the WYSIWYG and backspace until your code is all on one line, then separate by hitting enter/return once. (If you try this on the Visual side, you will end up with a <br> tag that you don’t want.)

Submit a Comment

Your email address will not be published. Required fields are marked *