Text Editor

A text editor is a text editing program, similar to Microsoft Word, but for code.

A text editor is a text editing program, similar to Microsoft Word, but for code.

When you are writing code you want to make sure that the only data in your document is the code you wrote. What you need is to write your code in a plain text editor that makes sure your text has no styles applied to it.

Why are styles such a problem? Who says I can’t write my code in hot pink Comic Sans?!

Well, it turns out that the code that powers programs like Microsoft Word and Google Docs, and enables you to do things in the program like style your text hot pink and Comic Sans, can interfere with whatever code you write and muck up your program. And even if you are on the more conservative end, and only use the default setting—size 12, black, Times New Roman font—remember that that’s still a style imposed by the program.

Think that because you aren’t a developer this isn’t an issue for you? Think again! If you write any copy for any website, you need to watch out.

For example, let’s say that I am writing a newsletter blog post. We have a Skillcrush CMS, but I prefer to write my newsletter copy in Google Docs. So I write a sentence and then I copy/pasted my text into my Skillcrush CMS.

What I want:

My h1 headline is hot pink and Comic Sans.

What I get:

<strong id="internal-source-marker_0.49519535480067134">My h1 headline is hot pink and Comic Sans.</strong>

See that extra stuff, the ‘<strong>’ tag and that ‘id=”internal-source-marker_0.49519535480067134″‘? That’s some extra junk that Google Docs added to my HTML text!

So what’s a developer (or blog writer) to do? Use a text editor specifically made for writing code, of course. If you are willing to spend some money we recommend TextMate. Otherwise, Notepad++ (Windows), TextWrangler (Mac), and Aptana are great, free options.

Cocktail Party Fact

Of course, writing in plain text editors with black fonts and white backgrounds can be a little boring. Not just that, but it can make your code really hard to read because you won’t be able to easily distinguish between tags, text, methods, classes, or functions.

Fortunately, most code text editors ship with something called syntax highlighting. What syntax highlighting does is highlight in different colors various parts of your code. For example, in JavaScript, your reserved words might be one color, function names another color, and methods a third. This way it’s easy for you to scan the code to figure out what misspelling is causing all those darn errors…