The Labcoat Editor
The Labcoat Editor allows you to edit stylesheets and scripts that will injected into the site via the Chrome Extension.
The code panel
The code panel uses CodeMirror to provide the editing environment. It provides syntax highlighting, auto-indenting, line-numbers, and more.
Several keyboard shortcuts are available to streamline your coding efforts:
||Save all of your files for that version|
||Comment the current line or selected lines.|
||Enter into full-screen mode.
||Indent the current line|
||Outdent the current line|
The file sidebar
The file panel allows you to work with multiple files by navigating between them and adding/removing.
Adding a file
+ Add button next to the CSS or JS headings to add a new file. You can enter a filename and extension, or specify an external dependency (described below).
If you need an external library (either CSS or JS), you can insert it by specifying a URL or by selecting one of the pre-defined libraries.
These scripts/stylesheets will be inserted as-is into the target website. Labcoat does not host the files at all. For the popular libraries, they will be hosted directly from CDNjs.com (which is awesome, you should use them).
For your own external depenendencies, the URL will be inserted as is. Be mindful of files that are not available on the public internet. We also recommend using
https at all times to ensure that the script isn’t blocked if the target website uses
The Labcoat Editor support serveral pre-processors, when adding a file, simply choose the extension you’d like:
- Sass, both in
SCSSsyntax. Note, you can import partials by starting your file with an underscore (e.g.,
_grid.scssand then import it using
- LESS. Note that importing partials is not supported at this time.
- Coffeescript. Hate semicolons and braces?
.jsfiles and let Chrome handle it. To see if the feature you want works in Chrome natively, check out the ES6 Compatibility Matrix.
When using any pre-processor, syntax is important. Watch out for error messages at the top of the editor, they will appear when attempting to save. Invalid files will not be saved.
Removing a file
x next to a file will delete the file after prompting you with an
Are you sure… message.
Be very careful, there is NO UNDO.
Re-ordering files (controlling load order)
Each file listed will be added as a separate script or stylesheet to the target website. The files will be inserted in the order listed in the file sidebar.
To change the order, drag the handle up or down to drag and drop the file into your desired order.
Do you have any suggestions for how to improve this (or any) documentation?
Send an email to firstname.lastname@example.org