1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Dreamweaver XenForo Template Syntax Highlighting Configuration

Discussion in 'Official Development Tutorials and Resources' started by Kier, Dec 30, 2010.

  1. Kier

    Kier XenForo Developer Staff Member

    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.

    Dreamweaver Syntax.png

    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:
    Colors.xml merged.png

    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.

    Dreamweaver Code Coloring Editor.png Dreamweaver Tag Library Editor.png
    Good luck!
     

    Attached Files:

    DRE, Marocinoh, HWS and 20 others like this.
  2. Miko

    Miko Well-Known Member

    Thank you Kier, I was looking forward this release from our talk :)
     
  3. Kier

    Kier XenForo Developer Staff Member

    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.
     
  4. we_are_borg

    we_are_borg Active Member

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

    Dan Well-Known Member

    Me included ;) Although it is making my head explode at the moment [​IMG]
     
  6. Miko

    Miko Well-Known Member

    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
     
    Jeremy likes this.
  7. Carlos

    Carlos Well-Known Member

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

    Color me speechless. O_O
     
  8. we_are_borg

    we_are_borg Active Member

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

    Jeremy XenForo Moderator Staff Member

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

    Jeremy XenForo Moderator Staff Member

    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.
     
  11. Erik

    Erik Well-Known Member

    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. :)
     
  12. Kier

    Kier XenForo Developer Staff Member

    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.
     
    Luke F, Jeremy and Miko like this.
  13. Awesome-o

    Awesome-o Active Member

    Kier, I'm inspired by your productivity!
     
  14. we_are_borg

    we_are_borg Active Member

    Kier was the link that i gave you any good?
     
  15. Kier

    Kier XenForo Developer Staff Member

    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 :)
     
  16. we_are_borg

    we_are_borg Active Member

    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.
     
  17. EQnoble

    EQnoble Well-Known Member

    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.
     
  18. GofD

    GofD Well-Known Member

    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.
     
  19. PoLiZe

    PoLiZe Well-Known Member

    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)
     
  20. Sim

    Sim Well-Known Member

    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
     
    Kier and Michael Dance like this.

Share This Page