Custom JSBin Settings

readme.md

Custom JSBin Settings

You may already know about the JSBin tool created by Remy Sharp. It was the first website of it's kind that I'm aware of that lets you quickly prototype and play around with web concepts in a way that is social and fun. Although it has been around for a while Remy has been adding more and more features to it recently. One of the ones that I want to point out is the ability to modify the settings of it's internal code editor.

JSBin internally uses the CodeMirror library for it's HTML, JavaScript, and CSS code editors. JSBin exposes the Configuration Settings of CodeMirror and allows you to set them yourself. The settings are stored in localStorage so they are available the next time you use JSBin. CodeMirror supports a whole suite of settings, but the following are the ones that I am most interested in:

• theme - Color scheme that will be used for the editor. Currently the following themes exist: solarized-light, solarized-dark, monokai, vibrant-ink, cobalt, blackboard, ambiance, & jsbin (default)
• indentUnit - The number of spaces inside a block of code
• smartIndent - Automatically indent based on the context of what you are doing
• tabSize - This defines the width of the tab character
• indentWithTabs - Determines if you want to use tabs instead of spaces when you intent
• autoClearEmptyLines - Clears lines that only have whitespace in them when the cursor exits the line
• lineWrapping - If there is a long line that extends outside of the viewable area this will wrap the contents
• lineNumbers - This will show lines numbers in the left gutter
• matchBrackets - When your cursor is on a bracket this will match the other associated bracket

You can set these options manually in your browser's console like the following snippet of code...

If you want to share with others your settings for a specific JSBin you can add an api URL parameter pointing to a configuration file.

The following URL will load JSBin with a custom set of code editor options.

http://jsbin.com?api=http://j.mp/jsbin-settings

The http://j.mp/jsbin-settings file I am using looks like the following...

console.js

jsbin.settings.editor.theme = "monokai";
jsbin.settings.editor.indentUnit = 4;
jsbin.settings.editor.smartIndent = true;
jsbin.settings.editor.tabSize = 4;
jsbin.settings.editor.indentWithTabs = true;
jsbin.settings.editor.autoClearEmptyLines = true;
jsbin.settings.editor.lineWrapping = true;
jsbin.settings.editor.lineNumbers = true;
jsbin.settings.editor.matchBrackets = true;

settings.js

settings = {
    jshint: true,
    editor: {
        theme: "monokai",
        indentUnit: 4,
        smartIndent: true,
        tabSize: 4,
        indentWithTabs: true,
        autoClearEmptyLines: true,
        lineWrapping: true,
        lineNumbers: true,
        matchBrackets: true
    }
};

To use a dark theme, you'll also need to do something like:

.focus .CodeMirror-activeline .CodeMirror-linenumber,
.focus .CodeMirror-activeline-background {
  background: #30303b !important;
}

in your browser's user style sheet.

github changed the url to raw files so this is broken
http://jsbin.com?api=http://j.mp/jsbin-settings
This
https://raw.github.com/gist/3445135/37a2b858435d5a3214e1bc1a9766ce096a08d5f9/settings.js
is now
https://gist.github.com/elijahmanor/3445135/raw/37a2b858435d5a3214e1bc1a9766ce096a08d5f9/settings.js
so this works
http://jsbin.com/?api=http://j.mp/1bjbl3m

None of these seem to work anymore...even with the above suggestions. Just for kicks I put this on my server.

So this should work

http://jsbin.com/?api=http://planetoftheweb.com/i/jscustom.js

and it still launches with the default.

Another setting that I found helpful:

jsbin.settings.addons.closebrackets = false