Cody

A library to embed demos for front-end developers. It has no dependencies and it's fully customizable.

DEMO

TUTORIAL

Install

You can install Cody using npm or just downloading it manually.

NPM

npm install cody.js

Basic usage

1. Include the Cody scripts and styles.

<link rel="stylesheet" href="css/cody.css">
<script src="js/cody.js"></script>

2. Setup the code in the HTML.

The structure should be as follows:

• A wrapper: .cody is default class used to apply basic styles.
• An HTML element for each language needed (.html, .css and/or .js): Can be any type of HTML tag, but I recommend code (if you only want to link files) or textarea (if you want to put the code directly inside).

<div class="cody">
    <!-- Attribute [data-code]:   Code that you want to show. -->
    <!-- Attribute [data-assets]: Code that you don't want to show, but needed in execution. Useful for external libraries and dependencies. -->
    <!-- You can link as many `code` or `assets` as needed separated by comma. -->
    <code class="html" data-code="demo.html"></code>
    <code class="css" data-assets="css/normalize.css" data-code="css/demo.css"></code>
    <code class="js" data-assets="js/segment.min.js, js/d3-ease.v0.6.min.js" data-code="js/demo.js"></code>
</div>

Or you can easily include a Codepen demo:

<!-- Attribute [data-pen]: The URL of the desired pen. -->
<div class="cody" data-pen="http://codepen.io/lmgonzalves/pen/vLaXNR"></div>

Note that in case the pen have external dependencies, you need to include them too as follows:

<!-- Attribute [data-css-assets]: External CSS dependencies. -->
<!-- Attribute [data-js-assets]:  External JS dependencies. -->
<div class="cody"
     data-pen="http://codepen.io/lmgonzalves/pen/JbeQKG"
     data-css-assets="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"
     data-js-assets="https://cdnjs.cloudflare.com/ajax/libs/segment-js/1.0.3/segment.min.js, https://d3js.org/d3-ease.v0.6.min.js"
></div>

3. Initialize it in JavaScript.

// The `init` function receive an object with options. See details below.
Cody.init({
    boxesHeight: 400,
    css: ['css/cody-basic.css']
});

Options

The options should be passed to the init function in object notation. Here is the complete list, for reference:

Name	Type	Default	Description
target	String	'.cody'	CSS selector to initialize all matched elements.
boxesHeight	Float	145	Height (in pixels) for the boxes that will show the code and the result.
tabsHeight	Float	35	Height (in pixels) for the tabs.
tabsVisible	Boolean	true	Choose if you want to show the tabs or not.
tabsSpace	Boolean	true	If true, the space for tabs will be reserved. Set it to false if you want to set the tabs to position: absolute or something like that.
tabs	String	'html, css, js, result'	Tabs you want to show separated by comma.
selected	String	'result'	Tab that will be selected initially. If resultAlwaysVisible is true, then it will be the first tab by default.
htmlTitle	String	'HTML'	Title for HTML tab.
cssTitle	String	'CSS'	Title for CSS tab.
jsTitle	String	'JS'	Title for JS tab.
resultTitle	String	'Result'	Title for Result tab.
lineNumbers	Boolean	false	Choose if you want to show line numbers or not using Prism.
resultAlwaysVisible	Boolean or Float	false	If true, the Result will be showed in a separate box and always visible. Define it as a float value to specify a different height (in pixels) for this box.
loading	String	'<div class="cody-loading"><div class="spinner"></div></div>'	HTML code for the loading indicator.
css	Array	undefined	Array of String values representing links to CSS files, or code directly, that you want to inject in the Cody iframe. Here you need to link at least cody-basic.css (basic theme styles), and one of the themes available (cody-classic.css or cody-ligth.css). You also need to provide the styles for the highlight system you prefer, such as Prism. And of course, here you can provide your own styles as well, and customize it as much as you like.
js	Array	undefined	Array of String values representing links to JS files, or code directly, that you want to inject in the Cody iframe. Here you may only need to provide the scripts for the highlight system. And just like styles, you can also provide your own scripts.
baseUrl	String	''	String to be used as base URL for all links, allowing you to use relative URLs.

Overriding options

Another way to specify options is in the HTML. You can override any option you like setting it as data-*, and in "dash-case" instead "camelCase". For example, if you want to override the resultTitle option, you need something like this:

<div class="cody" data-result-title="The new result title">
    <!-- CODE HERE -->
</div>