Dreamweaver 8 as a Ruby IDE

In last week's post, I talked about how I was trying to find a suitable IDE for Ruby on Rails development, and how my preferred solution would be a syntax highlighting plug-in or modification for Dreamweaver or Visual Studio.

I also provided a link to this tutorial from BDC Software, which implied that with a bit of tweaking, Dreamweaver could not only do the syntax highlighting, but even code hints too. I tried it, and it worked, so the rest of this post is a step by step process for both, which borrows an awful lot from that tutorial, and from this page from RubyGarden.

First off, I'm assuming you already have Dreamweaver installed, the process might work with earlier versions, but I only tried it with version 8. Also, I'm using the Windows version, and I have no idea if it works on a Mac. You're going to be modifying some of Dreamweaver's configuration files, so you might want to take a backup copy of each file before you make the changes.

We'll start by adding support for Syntax Highlighting, and to do that we need to find the Dreamweaver configuration directory under your user profile.

c:\Documents and Settings\<username>\Application Data\Macromedia\Dreamweaver 8\Configuration\ 

Open Extensions.txt and add a new line to the end of the file:-

RB,RHTML:Ruby Files 

Then you need to find the main Dreamweaver configuration directory.

C:\Program Files\Macromedia\Dreamweaver 8\Configuration

Here, you need to modify the MMDocumentTypes.xml file in the DocumentTypes directory. Somewhere near the bottom, before the </documenttypes> closing tag, add the following:-

<documenttype id="Ruby" internaltype="Text" winfileextension="rb" 
	macfileextension="rb" file="Default.rb" writebyteordermark="false">
		Ruby Code
		Ruby source code 
<documenttype id="RubyTemplate" internaltype="Dynamic" winfileextension="rhtml" 
	macfileextension="rhtml" file="Default.rhtml" writebyteordermark="false">
		Ruby Template 

You could include a description for RubyTemplate, but it is an optional field. If you want to add any more file types, two important attributes in those <documenttype> tags are id, which must be an unique identifier, and internaltype. The internaltype="Dynamic" attribute for rhtml files indicates that the HTML design view can be used, whereas internaltype="Text" indicates code-view only. The file attribute specifies the template which will be used by Dreamweaver when you create a new file, these files should be stored in the DocumentTypes\NewDocuments folder.

Next up, we need to modify the code coloring information, for this we can go back to the Dreamweaver configuration directory in your user profile directory. We're looking for CodeColoring\CodeColoring.xml file. First, we add our new RubyTemplate file type to the HTML color coding section, to ensure that HTML sections of our rhtml files will be properly highlighted.

<scheme name="HTML" id="HTML" doctypes="ASP.NET_VB,ASP.NET_CSharp,ASP-JS,ASP-VB,ColdFusion,CFC,
	HTML,JSP,PHP_MySQL,LibraryItem,WML,XSLT,RubyTemplate" priority="50">

The list of doctypes will vary between Dreamweaver versions, so I strongly suggest that you just edit the existing line to add the RubyTemplate to the list, rather than pasting over the contents of your file. Next, you need to paste in the Ruby keywords for highlighting, it's a complete scheme, so just paste it to the bottom before </codeColoring>.

I've copied the list into a plain text file for easier copy and paste.

At this point, I should remind you that I don't know much about Ruby, and point out that the author of the tutorial which this list came from also claims to be no Ruby expert, so some of you gurus out there might want to correct the list, or provide additional keywords.

Once you've made these modifications, you should find that Dreamweaver correctly identifies rb and rhtml files, and highlights all of the keywords we added along with HTML in rhtml files. You might be satisfied at this point, but we haven't added the code hints yet.

Back in the main Dreamweaver configuration directory, find and open the CodeHints\CodeHints.xml file, and paste in the contents of this file from BDC Software. Again, I'm not a Ruby or a Rails expert, so I don't really know how complete or accurate the list is.

At this point I did hit a bit of a snag, as I couldn't seem to enable the design view on my rhtml files. I eventually found out that the reason it wasn't working was because I had previously added .rhtml and .rb to the File Types, Open in Code View list in the Dreamweaver preferences. If you've already been trying to use Dreamweaver to modify Ruby files, it's possible that you've done the same, but everything works perfectly as soon as you remove them from the list.

If you've used the Dreamweaver design view with another type of dynamic page, you will know that little yellow placeholder icons are used to indicate server script sections. At this stage, the server scripted sections of your rhtml files will be shown as ASP icons. I tried to find a way to have this show a ruby icon.

First, I created this icon, which I'm sure you could easily improve upon, and copied it to the ThirdPartyTags directory. I then added the following line to the end of the ThirdPartyTags\Tags.xml file:-

<!-- RubyTemplate -->
<tagspec tag_name="rb" start_string="<%" end_string="%>"
	detect_in_attribute="true" icon="ruby.gif" icon_width="17" icon_height="15"/>

Now, although this works, it does seem to override the ASP icon in .asp files in certain scenarios. Unfortunately, as there is no Ruby server model to associate the file types with, I'm not sure where to go from here. I tried associating the rb tag with the PHP server type, so as not to interfere with .asp files, but I couldn't seem to get that to work either.


I can work on Ruby files in Dreamweaver with syntax highlighting and code hints, but clearly this only scratches the surface of Dreamweaver customization. It would be entirely possible to build a full server model add-in for Dreamweaver to support all of the Ruby on Rails file types and syntax. It could even be possible to add an interface to connect to a server and run the Rails generate scripts. It sounds like a nice idea, but I think for now I've spent enough time looking into the tools, I should get back to actually learning Ruby and Rails.

All the credit for the content of this post has to go to the authors of those original tutorials, I just thought it would be useful to put everything step-by-step on one page.


Thanks Eric, that looks interesting, I'll be sure to take a closer look.


I did take a closer look at this, and while I'm sure it will normally work, I wouldn't recommend it if you've already followed any of the steps in this tutorial.

It's no reflection on the author of the extension, it is a much easier way of enabling the code hints and colouring, but it does clash with some of the document type settings here. For me that meant an error on Dreamweaver startup even after disabling and removing the extension. If you have the same problem, I was able to get rid of the error by changing the DocumentTypes\MMDocumentTypes.xml file in my user profile directory. In my case I just deleted the version from the user profile (the entire DocumentTypes directory in fact), because I knew I hadn't made any other changes to it, all the changes I made were directly to the central Dreamweaver version of the file. You might want to take a more cautious approach!

No problem

Thanks for the comments, Bil, I'm glad it helped.

Thanks Dave

Thanks for the tip Dave, I haven't updated yet, but at least now I know what to expect.