I am presently learning PHP and Linux simultaneously. And I want to blog my notes not only for my future reference, but also because it could help others.

I just noticed an issue with Wordpress - - it automatically adds <pre></pre> tags in the background (HTML-side I mean, in the visual editor I see the code's background highlighted) as soon as I paste some code, be it HTML, PHP etc.

I have searched a lot, and could find nothing about this. Looks like nobody thinks this as an issue, or it's something too easy to resolve. Either way, I am on the other side of things. So, please help me out.

I want Wordpress to stop highlighting the code like that. I Just want it to keep whatever I paste as it is.

migrated from stackoverflow.com Aug 11 '11 at 8:56

This question came from our site for professional and enthusiast programmers.

  • 1
    I hate to say it, but that's what <pre> does, keep your code exactly as it is. Otherwise Wordpress would change the font spacing, alignment, and everything would look awful. If you're blogging with a lot of code, I'd really strongly suggest using <pre>, and offsetting the segments of code from the rest of your post. Or, alternatively, provide a link to the entire file and only include the relevant lines on your blog. – Bean Jul 20 '11 at 19:06
  • If I can't get a better suggestion, I guess what you said is the only way. – Aahan Jul 20 '11 at 19:10
  • Do I understand that the problem is the background color used for the pre tag. You should be able to sort that out by modifying the CSS for the pre tag. – Eelke Jul 20 '11 at 19:16
  • Specifically, I'm sure there's a way around auto-wrapping <pre> tags. I just think it's a bad idea stylistically for a blog. I certainly hate reading code when it's not monospaced, and indented properly. – Bean Jul 21 '11 at 2:27

The only way to keep it the way you paste it is by switching to the HTML tab - this will show you the raw code as you formatted it. Wrapping code in tags is also a good idea because it tells the browser that the code is literally 'precomposed', and it therefore won't render it. In terms of WP actually altering your code it is likely it will change characters such as '<' for their HTML entity equivalent, meaning browsers will render it as text rather than code.

Why exactly do you want to keep it without the tags? It shouldn't alter that much.

  • Okay... then will adding escaped code in the HTML tab work as intended? What do you think? – Aahan Jul 20 '11 at 19:13
  • If you paste indented into <pre> tags it remains indented as the browser takes it that it is pre-formatted. You will need to replace the '<' yourself to ensure the code shows up, but yes indentation will remain inside the <pre> tags. – Tom Walters Jul 20 '11 at 19:17

I would like to recommend the Syntax Highlighter Evolved plugin for Wordpress. I use it on my own site and it is awesome. In fact a lot of the programming blogs you read will use it also. It supports a large number of coding formats, line numbers, alternate line colors, autocopy to clipboard, etc.

WP plugin

Authors Website

Example from my website


There is probably a pre tag somewhere in the included template files. If you are working with a local copy - try doing a search for <pre> and see what files contain it.

I have had similar issues with the wordpress wysisyg - and just edited the template file outright.

Of course, this only is doable with the self-hosted wordpress, and not a blog on wordpress.com

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.