Coda Tips & Tricks
Posted 3 months ago.
- Download / Feedback •
- Help •
- Coda Tips
Overview • Tips & Tricks • Shortcuts • Bookmarks • Plugins
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.
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:
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:
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.):
Edit .htaccess-files with syntax highlighting
- Download “Apache config files” here »
- Save the unpacked file to ~/Library/Application Support/Coda/Modes/
- Assign the Apache mode to the “htaccess”-extension in the Preferences:
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):
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
HTML/XML
PHP-HTML/Javascript
SQL
Codaclips URL syntax
Plugins
Zen Coding (*): http://onecrayon.com/tea/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/
Also like to have an avatar image? Get one at gravatar.com (free) »
[...] collection of hints & tips for Coda. You can find everything here – comments welcome of course. Share this [...]