View source for Adobe Dreamweaver - adding new extensions and syntax highlighting

==About==

{{DaughterPage|mother=[[Adobe Dreamweaver]]}}

I'm a big fan of Dreamweaver, and it comes with a big built in list of mappings from file types to code syntax highlighting, but every so often you might come across a file type which isn't highlighted the way you want. One big example of a file type that isn't recognized is [http://en.wikipedia.org/wiki/Python_(programming_language) Python] (.py) files. Fortunately there is a way to add extra extensions and syntax highlighting "schemes" to Dreamweaver by editing a few of Dreamweaver's XML/configuration text files. Below I have outlined instructions on exactly how to perform these tasks using python as my example.


These instructions have been tested with <b>Window 7</b> and <b>Adobe Dreamweaver CS5</b>, but work on MAC too. Be warned that for different versions of Windows and/or Dreamweaver you will probably find the files located in different slightly locations ([http://kb2.adobe.com/cps/164/tn_16410.html see here]). On a MAC computer you'll find all the files under: <u>/Users/anoske/Library/Application Support/Adobe/Dreamweaver CS5/en_US/Configuration/etc...</u>.


{{Prettyblockquote}}
WARNING: Before changing each file I <b>strongly recommend you make a (backup) copy of each</b> to your desktop. By doing this it should be easy to revert to the old version if you make any mistakes. Avoid making these backup copies to the same directory, as this might cause unexpected errors, despite you giving the file a different name ([http://kb2.adobe.com/cps/164/tn_16410.html see here]).
</blockquote>



==Step 1) Adding a New File Extension to Dreamweaver's Recognized Extensions (<u>Extensions.txt</u>)==

Go to: "<b><u>C:\Users\you\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration</u></b>"

Open the file "<b><u>Extensions.txt</u></b>" and add the following line of text to the end:

 PY:Python Files

If you restart Dreamweaver it will now "recognize" .py files. In practical terms, this means that when you click the menubar: <b>File > Open</b> or <b>File > Save As</b> the option "<i>Python Files (*.py)</i>" will appear on the drop down list of file types. When you open such a file, however, it will still be in black-and-white: in other words this step alone is pretty useless!


<i>TIP: To make this change for all users, edit the same file under "<b><u>C:\Program Files\Adobe\Adobe Dreamweaver CS5\configuration</u></b> instead. This goes for the files in step #3 and #4 too."</i>



==Step 2) Mapping a File Extension to (<u>MMDocumentTypes.xml</u>)==

Go to: "<b><u>C:\Program Files\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes</u></b>"

Open the file "<b><u>MMDocumentTypes.xml</u></b>" and add the following line of text after the 2nd last line, just before the "<i>&lt;/documenttypes&gt;</i>" tag:

 <syntaxhighlight lang="xml">
	<documenttype id="Python" internaltype="Text" winfileextension="py" macfileextension="py" file="Default.py" writebyteordermark="false" mimetype="text/py">
		<TITLE>
			<MMString:loadString id="mmdocumenttypes_70" />
		</TITLE>
		<description>
			<MMString:loadString id="mmdocumenttypes_71" />
		</description>
	</documenttype>
</syntaxhighlight>

Here we specify that .py files should map to a new color scheme with the id "Python". This color scheme is created in a separate file. Also note that the number in 'mmdocumenttypes_70' and 'mmdocumenttypes_71' should follow on from the numbers above it. If you were happy mapping a new file extension to an existing color scheme you could list it here instead - for example you could replace the word "Python" with "Java". Alternatively, you could find the line "<i>&lt;documenttype id="Java" internaltype="Text" winfileextension="java" macfileextension="java" file="Default.java" ...</i>" and modify it to "<i>&lt;documenttype id="Java" internaltype="Text" winfileextension="java<u>,py</u>" macfileextension="java<u>,py</u>" file="Default.java" ...</i>". Unfortunately python is very different from all the default listed languages, meaning you'll probably want to read on and see how to make your own color scheme.

<i>NOTE: If you can't edit this file, try copying the file to your (Windows) desktop, editing there and then dragging back in. This step will only works if you have admin privileges.</i>



==Step 3) Creating a new Syntax Color Scheme (<u>CodeColoring.xml</u>)==

Go to: "<b><u>C:\Users\anoske\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration\CodeColoring</u></b>"
 
Open the file "<b><u>CodeColoring.xml</u></b>" and add the following line of text after the first line:

<i>NOTE: You can add it further down, but it's a long document, so I suggest the start.</i>

<syntaxhighlight lang="xml">
	<scheme MMString:name="Python/scheme/name" id="Python" doctypes="Python" priority="20">
		<ignoreCase>No</ignoreCase>
		<ignoreTags>Yes</ignoreTags>
		<defaultText MMString:name="CodeColor_JavaDefaultText/defaultText/name" id="CodeColor_JavaDefaultText" />
		<blockStart MMString:name="CodeColor_JavaBlock/blockStart/name" id="CodeColor_JavaBlock" doctypes="JSP" scheme="customText"><![CDATA[<%]]></blockStart>
		<blockEnd><![CDATA[%>]]></blockEnd>
		<commentStart MMString:name="CodeColor_JavaComment/commentStart/name" id="CodeColor_JavaComment"><![CDATA[""""]]></commentStart>
		<commentEnd><![CDATA[""""]]></commentEnd>
		<endOfLineComment><![CDATA[#]]></endOfLineComment>
		<stringStart MMString:name="CodeColor_JavaString/stringStart/name" id="CodeColor_JavaString"><![CDATA["]]></stringStart>
		<stringEnd><![CDATA["]]></stringEnd>
		<stringEsc><![CDATA[\]]></stringEsc>
		<charStart><![CDATA[']]></charStart>
		<charEnd><![CDATA[']]></charEnd>
		<charEsc><![CDATA[\]]></charEsc>
		<brackets MMString:name="CodeColor_JavaBracket/brackets/name" id="CodeColor_JavaBracket"><![CDATA[{[()]}]]></brackets>
		<operators MMString:name="CodeColor_JavaOperator/operators/name" id="CodeColor_JavaOperator"><![CDATA[+-*/%<>!?:=&|^~]]></operators>
		<numbers MMString:name="CodeColor_JavaNumber/numbers/name" id="CodeColor_JavaNumber" />
		<idChar1>_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</idChar1>
		<idCharRest MMString:name="CodeColoring/CodeColoring/CodeColor_Identifier" id="CodeColor_JavaIdentifier">_$abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</idCharRest>
		<keywords MMString:name="CodeColoring/CodeColoring/CodeColor_PythonReservedWords/keywords/name" id="CodeColor_PythonReservedWords">
			<keyword>and</keyword>
			<keyword>as</keyword>
			<keyword>assert</keyword>
			<keyword>break</keyword>
			<keyword>class</keyword>
			<keyword>continue</keyword>
			<keyword>def</keyword>
			<keyword>dict</keyword>
			<keyword>elif</keyword>
			<keyword>else</keyword>
			<keyword>except</keyword>
			<keyword>finally</keyword>
			<keyword>for</keyword>
			<keyword>from</keyword>
			<keyword>raise</keyword>
			<keyword>global</keyword>
			<keyword>if</keyword>
			<keyword>import</keyword>
			<keyword>in</keyword>
			<keyword>is</keyword>
			<keyword>lambda</keyword>
			<keyword>nonlocal</keyword>
			<keyword>not</keyword>
			<keyword>or</keyword>
			<keyword>pass</keyword>
			<keyword>print</keyword>
			<keyword>raise</keyword>
			<keyword>return</keyword>
			<keyword>try</keyword>
			<keyword>while</keyword>
			<keyword>with</keyword>
			<keyword>yield</keyword>
			
			<keyword>bool</keyword>
			<keyword>bytearray</keyword>
			<keyword>bytes</keyword>
			<keyword>complex</keyword>
			<keyword>float</keyword>
			<keyword>frozenset</keyword>
			<keyword>int</keyword>
			<keyword>list</keyword>
			<keyword>set</keyword>
			<keyword>str</keyword>
			<keyword>tuple</keyword>
		</keywords>
		<keywords MMString:name="CodeColoring/CodeColoring/CodeColor_PythonCommonWords/keywords/name" id="CodeColor_PythonCommonWords">
			<keyword>self</keyword>
			<keyword>session</keyword>
			<keyword>object</keyword>
			<keyword>request</keyword>
			<keyword>response</keyword>
			<keyword>exception</keyword>
			<keyword>out</keyword>
			<keyword>write</keyword>
		</keywords>
		<keywords MMString:name="CodeColoring/CodeColoring/CodeColor_PythonCommonFunctions/keywords/name" id="CodeColor_PythonCommonFunctions">
			<keyword>exec</keyword>
			<keyword>eval</keyword>
			<keyword>len</keyword>
			<keyword>sum</keyword>
			<keyword>getProperty</keyword>
			<keyword>setProperty</keyword>
		</keywords>
		<keywords MMString:name="CodeColoring/CodeColoring/CodeColor_PythonOther/keywords/name" id="CodeColor_PythonOther">
			<keyword>UserProperty</keyword>
			<keyword>StringProperty</keyword>
			<keyword>DateTimeProperty</keyword>
			<keyword>RequestHandler</keyword>
			<keyword>String</keyword>
			<keyword>True</keyword>
			<keyword>False</keyword>
			<keyword>None</keyword>
		</keywords>
		
		<sampleText doctypes="Python"><![CDATA[from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app

class MainPage(webapp.RequestHandler):
    def get(self):
        self.response.headers['Content-Type'] = 'text/plain'
        self.response.out.write('Hello, webapp World!')

application = webapp.WSGIApplication(
                                     [('/', MainPage)],
                                     debug=True)

def main():
    run_wsgi_app(application)

if __name__ == "__main__":
    main()
}]]></sampleText>
	</scheme>
</syntaxhighlight>

The syntax within these <i>&lt;scheme&gt;</i> tags is similar to the one listed for Java, but a lot of keywords and comments are different. Feel free to add your own words too. Notice that it keeps a reference to many colors used by Java (since these colors are a good choice), but in the last four "keywords" tags I've referenced four new color ids: "CodeColor_PythonReservedWords", "CodeColor_PythonCommonWords", "CodeColor_PythonCommonFunctions" and "CodeColor_PythonOther". If desired you can set these to match existing Java colors by changing all the matching values to "CodeColor_JavaReserved"... but in the final step below you'll see how to set your own colors.



==Step 4) Creating a new Syntax Color Scheme (<u>Colors.xml</u>)==

While still in: "<b><u>C:\Users\anoske\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration\CodeColoring</u></b>"
 
Open the file "<b><u>Colors.xml</u></b>" and add the following line of text to the 3rd last line, just before the <i>&lt;/colorGroup&gt;</i> tag:

<syntaxhighlight lang="xml">
		<syntaxColor id="CodeColor_PythonReservedWords" text="#0000FF" />
		<syntaxColor id="CodeColor_PythonCommonWords" text="#773300" />
		<syntaxColor id="CodeColor_PythonCommonFunctions" text="#009988" />
		<syntaxColor id="CodeColor_PythonOther" text="#990099" />
</syntaxhighlight>

These colors are blue, brown, aqua and purple (respectively) but it's fairly easy to change them if you prefer other colors.


==Step 5) Reload Dreamweaver and Check it Works!==

Having edited four different files, make sure you've saved them all and now quit and restart Dreamweaver. If you've made all these changes correctly you should now be able to open a .py file and see your new Python color scheme / syntax highlighting appear! Finally!

Don't hesitate to e-mail me if you have further comments. As mentioned, different operating systems and/or versions of Dreamweaver may have these files located in slightly different locations.



==See Also==

* [[Adobe Dreamweaver]] - the mother of this page
* [[Adobe Dreamweaver - adding syntax highlighting for SQL]] - shows how you can add syntax highlighting for SQL / postgreSQL pages

==Links==

* [http://bio3d.colorado.edu/imod/doc/3dmodguide.html#Making_Movies Changing and adding file extensions recognized by Dreamweaver] - an Adobe help page
* [http://theglenbot.com/django-template-syntax-highlighting-for-dreamweaver/ Django Template Syntax Highlighting For Dreamweaver] - an article showing how to get [http://en.wikipedia.org/wiki/Django_(web_framework) Django] code highlighting nicely within HTML page (which is a bit more specific than what we've done here. 


[[Category:Computers]]
[[Category:Programming]]