I had been struggling with an issues in some of my blog posts. In posts that explain how to change HTML or PHP code for a web page, I like to display the actual code in my blog post. The problem is that when a visitor copies the code, it isn’t formatted properly. While the actual alphanumeric characters are copied properly, the single and double-quotes aren’t valid.
When I simply typed the single or double-quote character from my keyboard, the characters would be rendered in the browser differently than if I had typed them in the code. The characters would be formatted and looked different on the web page and when they were copied, it would cause coding problems, such as when the code was pasted in the Blogger editor. I think that I have fixed the problem, and I’ll explain how in this post.
Different Quotes
To better illustrate the problem, let’s look at some simple HTML. The HTML code below shows code created by simply typing the double-quote character from the keyboard:
As you can see from the above code the double-quotes have a nice formatting to them. The problem is if you were to copy this code, the double-quotes formatting could cause problems, depending on the editor, such as the editor in Blogger.
To fix this problem, you would have to use the character code for the double-quotes. For example:
The above HTML code will produce the following:
As you can see, the double-quotes are standard with no formatting applied to them. I simply replaced the double-quote character with the character code ". For single-quotes I would use '. This should prevent problems when displaying HTML code in your web pages when it is copied and pasted in certain editors.