Crayon-Syntax-Highlighter : How to hide / remove line numbers

crayon-syntax-highlighter-removing-line-number

Crayon Syntax Highlighter is a very popular highlight code plugin for WordPress. I use it for highlighting my code on this site. Recently, when writing a new article, I wanted to add highlighted code without line numbers and noticed, that unchecking the option “Display line numbers by default” to hide line numbers didn’t work at all. Fortunately, there is a workaround which is the topic of this article.

Sometimes, having the line numbers are not desirable in the highlighted code. For me, this is especially true with the single line of code. Showing line number in this case seems just redundant and might even confuse my visitors.

When you select the code and click on the Crayon button in WordPress Post Editor, you get a window full of options, as shown here:

Crayon Syntax Highlighter - Add Code Window

When the option “Display line numbers by default” is deselected, it will insert “nums:false” attribute inside the class of the generated <pre> tag as shown here:

This should have removed the line numbers in the left side of the highlighted code below, but it doesn’t seem to do anything:

As you can see, the line number is still showing. Not sure if it is the plugin’s fault or some other plugin is interfering with the Crayon itself or I’m just not using it properly 🙂 , but “nums:false” was not working, so I had to figure out a way to solve this issue.

So here are the steps to remove the line numbering from the highlighted code when using the Crayon Syntax HighLighter plugin (currently v2.8.4):

Step 1: Wrap the generated <pre> code with a <div> element

First, we need to wrap the code that the Crayon plugin generates in the post with the <div> element containing a class, like so (yellow lines):

Now all that is needed is to define that CSS class in the stylesheet of your current theme.

Step 2: Add the following CSS class in your StyleSheet

Go to Appearance > Editor, open style.css and add the following CSS code:

And we are done. The highlighted code below uses this technique:

This works with both single or multiple lines of code.

Web Hosting
Web Hosting

Conclusion

When using Crayon Syntax Highlighter for WordPress, you have the option “Display line numbers by default” to either show or remove the line numbers of the highlighted code. But if this doesn’t not work, we can easily fix it by wrapping the generated <pre> code with <div> and a little CSS.

Have you had the same problem with the Crayon plugin? Do you recommend any other code highlighting plugin for WordPress? Let us know by dropping a comment.

Share this page

Add a Comment

Back to Top