Dreamweaver XenForo Template Syntax Highlighting Configuration

[Kier]

If you are using Adobe Dreamweaver to edit XenForo templates via WebDav (or even via copy-and-paste), you may be wondering how to get syntax highlighting and code completion working.



Unfortunately, it's a little long winded, but if you follow these instructions you should be fine. These instructions are for Dreamweaver CS5, but the principles are the same for previous versions as well.

First, download and decompress the XenForo-Dreamweaver.zip package attached to this message. Unpack it, and you will find two directories: CodeColoring and TagLibraries.

Secondly, ensure that Dreamweaver is not running. Quit it and make sure it has fully exited before proceeding.

Next, you will need to find your own Dreamweaver configuration directory. The exact location of the directory depends on your operating system, account name and Dreamweaver version, but here are two examples that should help you find yours:

• Mac OS:
  /Users/[YOUR ACCOUNT NAME]/Library/Application Support/Adobe/Dreamweaver CS5/en_US/Configuration
• Windows:
  C:\Users\[YOUR ACCOUNT NAME]\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration

Once you have found your Dreamweaver configuration directory, note that it contains directories including TagLibraries and CodeColoring. If for some reason it does not, don't worry, just create them.

I recommend that you back up your original CodeColoring and TagLibraries directories at this point.

Let's start with CodeColoring.

1. Within the CodeColoring folder from the zip, you will find a file called Colors-XenForo.xml.
2. Within the CodeColoring folder from your Dreamweaver configuration directory, you will find a file called Colors.xml.
3. Open both these files in a plain text editor.
4. You must now copy all the <tagColor /> tags from Colors-XenForo.xml and paste them into the <colorGroup doctypes="HTML"> tag of Colors.xml before the final closing </colorGroup> tag.
5. When you finish, save the file.
6. The end of your Colors.xml file will look something like this:

Next, TagLibraries.

1. Copy all the directories from the TagLibraries folder from the zip, into the TagLibraries folder in your Dreamweaver configuration directory.
2. Locate TagLibraries-XenForo.vtm from the zip and TagLibraries.vtm from the Dreamweaver config directory
3. Open both these files into a plain text editor. They are XML files.
4. You will need to copy all the <taglibrary> tags from TagLibraries-XenForo.vtm file and paste them into the <taglibraries> tag of TagLibraries.vtm, before the closing </taglibraries> tag.

Load up Dreamweaver and you should find that you have a bunch of new tag libraries defined, and the ability to apply syntax highlight and choose a colour scheme for various XenForo template tags.


Good luck!

 

[Miko]

Thank you Kier, I was looking forward this release from our talk

 

[Kier]

FWIW, I'm investigating whether it's possible to get Dreamweaver to recognise curly syntax like {xen:phrase ... } and {$variable} but no luck so far.

 

[we_are_borg]

Thank you Kier this is going to be helpful for the people.

 

[Dan]

Thank you Kier this is going to be helpful for the people.

Me included Although it is making my head explode at the moment

 

[Miko]

Now I have to port it to Panic Coda for Mac.... As I can't stand working on DW as much as some of the features like "open related files" are great for XenForo

 

[Carlos]

........The amazing things that you do, and the amazing things that xenforo is capable of....

Color me speechless. O_O

 

[we_are_borg]

Kier the syntax of {xen:avatar} is this link not some thing your looking for.

 

[Jeremy]

Now I have to port it to Panic Coda for Mac.... As I can't stand working on DW as much as some of the features like "open related files" are great for XenForo

I too would love to use this... and wow. If you happen to figure htis out... tell me? Pwease?

 

[Jeremy]

Actually, I got this working (to an extent). It'd be working just fine, but Coda seems to have issues with tags with : in them (code completion doesn't work). If I change the definition to be xenforeach, it works just fine. I'll be emailing them.

 

[Erik]

Why can't we just get syntax highlighting (code completion would be a stretch, but would be amazingly awesome) in the AdminCP editor? I tried the Skywriter Bookmarklet, but it didn't work.

 

[Kier]

Why can't we just get syntax highlighting (code completion would be a stretch, but would be amazingly awesome) in the AdminCP editor?

as I said in the video that introduced our WebDav features, I consider this to be an extreme case of reinventing the wheel. I've never used an editor running in a browser that was even remotely comparable to a dedicated HTML editor like Dreamweaver or Coda, so there seems little point in expending a huge amount of time and effort to reproduce their functionality when we can just use it directly.

 

[Awesome-o]

Kier, I'm inspired by your productivity!

 

[we_are_borg]

Kier was the link that i gave you any good?

 

[Kier]

Kier was the link that i gave you any good?

I hope to be able to spend a little time looking into it sometime this week, but so far I've only paid it a cursory glance. Hopefully it will do what we need

 

[we_are_borg]

I hope to be able to spend a little time looking into it sometime this week, but so far I've only paid it a cursory glance. Hopefully it will do what we need

Well i looked at it and saw that it could do stuff because you can use javascript at that point they lost me i can follow it but write it myself, well if you do not mind i rather that you did that. Also the color coding stuff that you provided with some simple adjustments you can make an installer for it that works with Adobe Extension Manager you only need to provide extra files.

 

[EQnoble]

I know it should work...but I think it just isn't going to work for me... damn them for no tag import export feature. I'll try again after I haven't pulled an all nighter and shoveled 10 inches or so of snow.

 

[GofD]

Awesome! I followed the instructions on doing this last night and got nowhere. Although all the tags were there (I could see them in the Tag Library editor), the functionality was non-functional. This morning, it works! The gremlins actually helped this time! Thanks Kier, this is awesome.

 

[PoLiZe]

on DreamWeaver CS4, i haven't the folder "TagLibraries" on C:\Documents and Settings\Adrian\Datos de programa\Adobe\Dreamweaver CS4\es_ES\Configuration
(%appdata%\Adobe\Dreamweaver CS4\es_ES\Configuration)

 

[Sim]

Just a note - for CS5 on Windows 7, the TagLibraries folder did not exist in the "user" configuration folder:

C:\Users\[username]\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration\TagLibraries

... instead, there is an "application" configuration folder at:

C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\configuration\TagLibraries

where I had to edit TagLibraries.vtm (by running my text editor as Administrator) to add the tags.

Note also that copying TagLibraries.vtm from the zip file and placing it in the "user" configuration folder (I copied the entire TagLibraries folder from the zip, which included the supplied TagLibraries.vtm), will result in duplicate tags being created in Dreamweaver, so the instructions should be more explicit about NOT copying that file and only copying the contents to the relevant existing TagLibraries.vtm in the application configuration folder.

Some more notes about tags from Adobe: Adobe Dreamweaver CS5 & CS5.5 * Registering the tag in the tag library