The Best Free Code Editor for Mac

Looking for a great, easy to use, free HTML editor for the Mac? Look no further!

I used to use a combination of Notepad and Notepad++ on Windows XP when I started to learn some HTML coding. After I got the Mac, it was a while since I was interested in that stuff again, but when I began to pick it up again, I had a few problems.

First of all, TextEdit, basically the Notepad equivalent for Mac, seemed like a nice alternative. I came across a few problems though.

TextEdit is More of a Word Processor

Or so it turns out, anyways. I tried to write some HTML code and the first thing should have given it away–the font in which the text was appearing, Lucida Grande. This means that even if I saved the file as an HTML web page, it would still appear as “Rich Text” and the browser wouldn’t know to actually read it as HTML code even if the syntax, layout, etc. were correct. Sure enough, upon opening the file in Google Chrome and Firefox, it displayed as the actual HTML code rather than what it was supposed to look like.

I scoured the Internet for a bit to figure out what I was doing wrong. Microsoft and Apple already made actual word processors for the Mac–Microsoft Word and Pages, respectively–and so I couldn’t figure out what I was doing wrong. Surely, I figured, TextEdit must be more than just a word processor and .txt file editor. If it’s a .txt file editor, I figured it must have some sort of HTML editing abilities.

It turns out it does have these capabilities, but you have to dig through the Preferences to change it in this manner:

1. Open TextEdit, then in the menu bar, click TextEdit > Preferences (or Command-,).

2. In the “New Document” tab, click the bullet that says “Plain text.” This is critical because HTML code must be saved in plain text rather than rich text; otherwise a browser or other HTML file reader will not recognize the text as being HTML code; it will just treat it as text, like a Word document.

3. In the “Open and Save” tab, go to When Opening a File, and check the box that says “Ignore rich text commands in HTML files.” Next, go to When Saving a File, and uncheck the box that says “Add .txt extension to plain text files.” You want to be able to save your HTML files as .html rather than .txt.

Close the preferences window, quit TextEdit, and then reopen it. TextEdit should now be working as an HTML editor.

There’s More You Will Eventually Need

Unfortunately, TextEdit, much like Notepad on Windows, is certainly not everything you will be needing in the long term. TextEdit is a good place to start, where you can get familiar with the basics of the code if you’re just starting out, but you can’t live off of it forever. Sooner or later, you’ll be tearing your hair out when a validator tells you there is an error on line 1274, and guess what–TextEdit doesn’t even offer line numbers!

In short, you’re going to want something free and easy to use but that also has more features than TextEdit. Enter: TextWrangler.

What is TextWrangler?

TextWrangler is a free program (yes, freeware: NOT shareware, and NOT a trial) offered by Bare Bones (BB) Software. There are many benefits to using this program. For one thing, it’s free (have I mentioned that yet?). For another, it has line numbers! And yet another benefit is that it knows the syntax and layouts of a host of languages installed already, including but not limited to: HTML, CSS, PHP, Java, ANSI C, C++, MySQL, XML, and many others. (You can view the full list of installed languages in the “Languages” pane in the Preferences window).

To download TextWrangler, just follow this link: Download TextWrangler. All you need is Mac OS X 10.6 or later (Snow Leopard), although Lion is recommended. I have Snow Leopard (my computer wasn’t new enough to make buying Lion worth it) and it runs just fine on my machine.

Thanks for reading! Please feel free to leave a comment below if you have questions or general comments.