Coda Tips & Tricks

My collected bag of tips & tricks & stuff for Coda

The selection is a bit subjective, especially the shortcuts – but nevertheless you may find some things you didn’t know yet.. Something wrong? Leave a comment.

This page is updated from time to time, so come back to see if there’s something new.

For some Coda 2 tips, panic itself has a nice and useful blog post

Tips & Tricks

Split view

  • ⌥-click split button: Split in opposite direction (of your default setting).
  • ⌘-click split button: Create a new split with an empty text file.

Files and tabs

  • ⌥-click on the close icon of a file tab: Close all other tabs.
  • ⌥-click toolbar button (Editor, CSS,..): Create a new tab in the given mode.

Path popup for files

  • ⌘-click on file tab show a popup with the path of the file:
    File Path Popup

Create a new folder quickly

  • ⌥-click the new file button under the file list (“+”): create a new folder instead of a new file.

Drag & drop files

  • Drag files into an editor to insert a relative path to this file
  • ⌥-drag files from the Coda File Browser

Viewing images/PDFs in Coda

  • Coda can open images and PDF files.
  • Image (or PDF) dimensions are visible in the status bar.
  • You can also set the zoom level and fit the image to the window there:
    View images in Coda

Clips

  • Drag & drop text onto the Clips Panel to create a new clip.

Browser preview

  • The page source in the preview browser is editable
  • Double-click on an element in the Coda DOM Inspector to highlight it in the split source code (if possible).

CSS editor

  • Right click on the styles to access advanced functions (copy, duplicate etc.):
    CSS Editor - Right Click Styles

Edit .htaccess-files with syntax highlighting

About Syntax Modes in Coda 2

Jump to Javascript errors

  • Enable the javascript error log in the preview window
  • Double-click on a javascript error to jump to the error line (if possible):
    Javascript error - Doubleclick in coda preview

Misc

  • Often overlooked but useful: Edit>Copy as XHTML and Text>Entab/Detab.
  • You can use Finder Smart Folders in the File Browser.

Assorted Keyboard Shortcuts

Windows & General

Sites/Editor/Preview/CSS/Terminal/Books⌘1 .. ⌘6
Go To Folder…⌥⌘G
Preview in Default External Browser⌥⌘B
Show/Hide Clips^⌘C
Show/Hide Colors⇧⌘C
Show/Hide File Browser^⌘B
Show/Hide Fonts⇧⌘T
Show Special Characters…⌥⌘T
Show Transcript^⌘T
Split Horizontally/Vertically^⌘L / ^⌥⌘L

In the File Browser

Back/Forward⌥⌘← / ⌥⌘→
Parent ⌥⌘↑
New Folder⇧⌘N
New File⌥⌘N
New File (Default type)⌘N

In the Web-Browser (Preview)

Back/Forward ⌥⌘← / ⌥⌘→
Go To Location⌘L
Reload⌘R
View Source⌥⌘U

While Editing

Balance (Select Enclosing Block)⌘B
Blockedit Selection⇧⌘B / hold ⌥
Close HTML Tag⌥⌘.
Look Up Selected Word in Reference Books⌘’
Go to (Jump) Selection (and highlight it)⌘J
Go to Beginning/End of Line⌘← / ⌘→
Go To Line Number…⇧⌘L
Go to Previous/Next Symbol⇧⌘D / ⌘D
Go to Previous/Next Word⌥← / ⌥→
Shift Text Left/Right⌘[ / ⌘]
Show/Hide Invisible Characters⌥⌘I
Show/Hide Line Numbers⌥⌘L
Show Validation Errors (HTML Mode only)⌥⌘V
Smaller/Bigger Font⌘- / ⌘+
Un/Comment Selection⌘/
Wrap Lines (toggle)⌥⌘W

Find & Replace

Find (in current document)⌘F
Find in Files…^⌘F
Find Previous/Next⇧⌘G / ⌘G
Find & Replace Next^⌘G
Use Selection for Find/Replace⌘E / ⌥⌘E
Hide Find Banner⇧⌘F
Jump to Searchbar⌥⌘F

Comments/Bookmarks

From Panic: Coda recognizes specially formatted comments in your code as “bookmarks”. These bookmarks appear in the Code Navigator pane, and allow you to jump to the corresponsing line of text with a single click.

CSS

/* !bookmark */

HTML/XML

<!-- !bookmark -->

PHP-HTML/Javascript

/* !bookmark */ or // !bookmark

SQL

/* !bookmark */

Codaclips URL syntax

codaclips://<<**Title:title**>>content

Plugins (recommended ones)

Git integration (for GitX/Gity): http://justinhileman.info/git-for-coda/

Zen Coding (*): http://onecrayon.com/tea/coda/, and here: https://github.com/sergeche/tea-for-coda

White Out (Remove trailing whitespaces): http://erikhinterbichler.com/software/white-out/

Line Commands (Move and duplicate lines): http://code.google.com/p/codaplugins/downloads/list

(*) What is Zen Coding? A very cool code completion method, see more details here: http://code.google.com/p/zen-coding/

30 Replies to “Coda Tips & Tricks”

  1. How do you actually use the plugin Line Commands?

    After I installed it, I don’t see any options anywhere. Googled and there isn’t any documentation available.

    Thanks for your help.

    1. Probably not ready for Coda 2.. Maybe write to the developer.

      Update: I just tried it out, works here with Coda 2. In the menu you find “Plug-Ins > LineCommands” and can choose the function there or use the shortcuts which can be seen in the menu.

  2. Anyway to set a size for a picture when I drop it into the editor? I am doing thumbnails and would love to set the auto drop size to by something like 50 by 50 px. Instead it comes up with ” ” allowing me to set the size individually for each picture.

    1. It works in my Coda installation – maybe the shortcut is assigned to something else in the Mac Keyboard Control Panel, or another plugin uses this shortcut? The Coda PHP & Web Toolkit doesn’t use it..

      1. Stupid I am — just realized that it was recently installed “Hands Off!” that intercepted the Opt+Cmd+G shortcut with their Network Monitor.
        Deactivated that, and here I am back to Coda with its shortcuts working!

        Thanks for checking the shortcut on your Coda installation, Mario!

  3. I can’t understand how to use “Balance (Select Enclosing Block) ⌘B”? I just clicking command + b and nothing happens, I also trying select some divs and click on in – nothing again :(

  4. When doing a quick Find and Replace All I have a sequence of keyboard shorts i do:

    Cmd+F
    Type in string to find
    Tab
    Type in replacement string
    Mouse click ‘Replace All’

    If I press Enter instead of mouse clicking Replace All, it just replaces the first instance of the find string. I realize i could use ctrl+cmd+G to do sequential replaces, but there has got to be a way to keyboard shortcut the ‘Replace All’ button?

    Any thoughts on this?

  5. You can no longer add a custom syntax mode through preferences.
    Instead, you shoul edit the info.plist file in the syntax mode.

  6. Anyone know where I can find the setting for how many characters the lines should wrap to? The basic behaviour is “wrap to window” but I’d like to wrap to a certain number of characters (80).

    (I know I could resize my window to be 80 characters wide, but I also like to fullscreen it sometimes.)

    1. Hi –

      I think that’s not yet possible. It is something for the wishlist of the next Coda version. I also don’t know of a plugin which does this, but that shouldn’t be much work if you use the Coda Plugin Creator.

      mario

  7. When working with Syntax Mode JSP-HTML, Commenting will work only with Shift-Command-/ and it produces an HTML comment, which is instead of .

    Is there any way to change this?

    I tried to install an equivalent Syntax Mode for Subetha Edit, which worked with respect to syntax highlighting, but the hotkey for commenting would not work at all.

    1. Hi –

      which other shortcut do you use for commenting? Maybe you can modify this via the global shortcuts (System Preferences->Keyboard).

      You can try the following (worked for me at the first glance):

      1. Back up your Coda Application, make a backup of the subetha-mode file

      2. Go to the Coda Application, right-click, “show package contents” and navigate to “Contents/Resources/Modes/JSP-HTML.mode/Contents/Resources”

      3. Copy (NOT move) the three xml-files to this folder:
      “YOUR USERNAME/Library/Application Support/Coda/Modes/JSP-HTML.mode/Contents/Resources”

      4. Restart Coda

      You can have a look at these files and compare them with the ones from the (backup of the) subetha-mode and try to change the entries in the XML one by one and compare what happens. This is the only way I know how to modify the syntax mode behaviour at the moment.

      Here you find more information: http://www.subethaedit.net/mode.html

      Hope that helps :)

      1. Hi, Mario –

        well, the standard shortcut for commenting should be Command-/, not Shift-Command-/, at least that is shown in the menu.

        Thanks for your tip. I followed that, but somehow the JSP comments seem to be shadowed by the HTML comment style.
        At the end of the Mode file I noticed the tag <import style=”HTML” /> could that be the problem, definitions being overwritten?

          1. Oh, I see, you are, of course, right about Command-Shift-7; I am so used to Command-7 in Eclipse that I took “7” for “/”.
            My fault – sorry.

Leave a Reply

Your email address will not be published. Required fields are marked *