` and `` tags around your desired code example.
*
* Below are a few examples in various languages. This is not an exhaustive list of supported languages.
*
* ### HTML
* ```
*
Example
This is some example code that is being styled.
*
* ```
* ### JavaScript
*```
var foo = require('f'),
bar = require('br'),
writeFile = f.denodify(br.writeFile),
path = require('path');
module.exports = function(littlePromise, options){
return littlePromise.then(function(little){
return writeFile(
path.join(options.dest,'little.json'),
JSON.stringify(little) );
});
};
* ```
* ### JSON
*```
{
"sites": {
"docs": {
"key" : "value"
}
}
}
* ```
*
**/
code {
background-color: #f7f8c3;
border-radius: 5px;
padding: 0 5px;
}
pre,
code,
pre *,
code * {
font-family: "Courier New", Courier, mono;
font-style: normal;
font-weight: 300;
}
pre {
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 5px;
margin: 0;
margin-bottom: 20px;
vertical-align: top;
overflow: auto;
padding: 10px 20px;
}
pre code {
font-size: 14px;
line-height: 16px;
letter-spacing: 0px;
background-color: transparent;
}
pre ol {
margin: 0 0 0 40px;
padding: 0;
}
pre ol li {
text-indent: 0;
color: #484848;
background-color: #ffffff;
margin: 0;
list-style: decimal;
}
/* Tomorrow Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
/* plain text */
code.prettyprint {
padding: 0 !Important;
}
.pln {
color: #484848;
}
@media screen {
/* string content */
.str {
color: #dd1144;
}
/* a keyword */
.kwd {
color: #333333;
}
/* a comment */
.com {
color: #999988;
}
/* a type name */
.typ {
color: #445588;
}
/* a literal value */
.lit {
color: #445588;
}
/* punctuation */
.pun {
color: #333333;
}
/* lisp open bracket */
.opn {
color: #333333;
}
/* lisp close bracket */
.clo {
color: #333333;
}
/* a markup tag name */
.tag {
color: #navy;
}
/* a markup attribute name */
.atn {
color: #teal;
}
/* a markup attribute value */
.atv {
color: #dd1144;
}
/* a declaration */
.dec {
color: #333333;
}
/* a variable name */
.var {
color: #teal;
}
/* a function name */
.fun {
color: #teal;
}
}
/* Use higher contrast and text-weight for printable form. */
@media print, projection {
.str {
color: #006600;
}
.kwd {
color: #006;
font-weight: bold;
}
.com {
color: #600;
font-style: italic;
}
.typ {
color: #404;
font-weight: bold;
}
.lit {
color: #004444;
}
.pun,
.opn,
.clo {
color: #444400;
}
.tag {
color: #006;
font-weight: bold;
}
.atn {
color: #440044;
}
.atv {
color: #006600;
}
}
/* Style */
pre.prettyprint {
font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
font-size: 14px;
border: 1px solid #cccccc;
padding: 10px;
}
pre.prettyprint ol {
font-size: 14px;
margin-bottom: 0px;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
/* */
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
/* */
}
/**
* @stylesheet api.less API
* @parent Styles.docs
* @description
* Styles the docs and overwrites some of the theme default styles.
**/
/**
* @styles simple-tag Simple Tag
*
* @description
* Simple tags are styled independently from parent containers, and are different from the `ul.tags li` elements.
*
* @demo demos/simple-tag.html
**/
.simple-tag {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #484848;
color: #ffffff;
font-size: 12px;
margin-left: 5px;
padding: 2px 8px;
}
/**
* @styles docs-title Title Section
* @description
* Styles the title section that shows as the top of each document. It is composed by
* a `.heading`, `tags`, a `subheading`, and a list of `links`.
*
* @demo demos/title-section.html
**/
.docs .title {
display: block;
border-bottom: 1px solid #eae9e9;
}
.docs .title .heading {
position: relative;
margin: 0;
}
.docs .title .heading h1 {
margin: 0;
display: inline-block;
max-width: 550px;
word-wrap: break-word;
}
.docs .title .heading .module {
position: absolute;
right: 0;
display: inline-block;
top: 10px;
}
.docs .title .heading ul.tags {
margin-bottom: 0 !important;
text-align: left;
display: inline-block;
}
.docs .title h2,
.docs .title h3 {
display: inline-block;
}
.docs .title h2 {
margin: 0;
}
.docs .title h2 code {
background: none;
color: #706f70;
font-size: 18px;
font-weight: bold;
}
.docs .title .sub-heading,
.docs .title ul.links {
float: left;
display: block;
width: 50%;
box-sizing: border-box;
margin: 0;
}
.docs .title ul.links {
margin-bottom: 16px;
}
.docs .title .links,
.docs .title .tags {
list-style: none;
margin: 0;
text-align: right;
padding: 0;
}
.docs .title .tags {
display: inline-block;
margin: 0;
position: relative;
top: -5px;
}
.docs .title .tags li {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #484848;
color: #ffffff;
font-size: 12px;
margin-left: 5px;
padding: 2px 8px;
}
.docs .title .links li {
display: inline-block;
margin-top: 1px;
}
.docs .title .links li:before {
content: '|';
padding-right: 5px;
padding-left: 3px;
}
.docs .title .links li:first-child:before {
content: none;
padding: none;
}
.docs h1 {
margin: 0;
display: inline-block;
}
.docs .module,
.docs .inherits,
.docs .title .links li {
font-size: 14px;
color: #999999;
font-weight: normal;
font-style: normal;
}
.docs .inherits {
display: block;
}
.docs .content.docs {
width: 662px;
margin-top: 20px;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 20px;
border-left-style: none;
border-bottom-style: none;
font-family: Arial, Helvetica, Geneva, sans-serif;
border-radius: 0 5px 5px 0;
}
.docs .content.docs ul,
.docs .content.docs ol:not(.linenums) {
margin-left: 0;
font-size: 16px;
line-height: 24px;
margin-top: 0;
margin-bottom: 15px;
line-height: 18px;
}
.docs .content.docs .iframe_wrapper iframe {
width: 100%;
border: 1px solid #cccccc;
}
.docs .contents li {
line-height: 24px;
}
.docs .contents ul li {
list-style-type: square;
}
.docs footer {
margin-top: 20px;
}
/**
* @styles docs-warning Docs Warning
*
*
* @demo demos/docs-warning.html
**/
.docs .warning {
background-color: rgba(217, 83, 79, 0.1);
}
.docs .warning h3 {
background-color: #d9534f;
color: #ffffff;
font-size: 18px;
line-height: 24px;
margin: 0;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 3px 15px;
}
.container.api {
display: table;
table-layout: fixed;
border-bottom: 1px solid #cccccc;
padding-top: 20px;
border-radius: 5px;
}
.container.api > * {
display: table-cell !important;
vertical-align: top;
}
.search-wrapper {
position: relative;
visibility: hidden;
display: none;
}
.search {
display: block;
border: 1px solid #cccccc;
padding: 3px 3px 3px 30px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
margin: 8px;
}
.search input[type='text']:focus,
.search input[type='text']:enabled {
border-color: none;
outline: none;
}
.search input[type='text'] {
display: block;
border-style: none;
background-color: rgba(255, 255, 254, 0);
width: 100%;
}
.search:before {
font-family: Bitstrap;
content: "\e012";
display: block;
position: absolute;
left: 17px;
color: #ffffff;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.49);
}
/**
* @styles signature Signature
*
* @description
* Used as a wrapper for parameters and returns. The signature has space for headings, code and additional plain-language explanations.
*
* @demo demos/signature.html
**/
.docs .signature-wrapper {
padding: 10px 15px 0;
border: 1px solid #484848;
border-radius: 0 0 5px 5px;
}
.docs .signature-wrapper*:last-child {
margin-bottom: 0;
}
.docs .signature.collapsed :not(h2) {
display: none;
}
.docs .signature h2,
.docs .primary-options h2 {
background-color: #484848;
color: #eae9e9;
font-size: 18px;
line-height: 24px;
margin: 0;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 3px 15px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.docs .signature h2 span,
.docs .primary-options h2 span {
font-size: 10px;
font-weight: normal;
font-style: normal;
float: right;
}
.docs .signature h2 code,
.docs .primary-options h2 code {
background-color: transparent;
color: #ffffff;
}
.docs .signature h2 a,
.docs .primary-options h2 a {
color: #ffffff;
}
/**
* @styles small-signature Small Signature
*
* @demo demos/small-signature.html
**/
.small-signature {
padding: 10px;
background-color: #eae9e9;
border: 1px solid #cccccc;
margin-bottom: 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.small-signature a.sig {
text-decoration: none;
color: #000000;
display: block;
font-weight: bold;
}
.small-signature a.sig code,
.small-signature a.sig code * {
background-color: none;
font-weight: bold;
background-color: transparent;
}
.small-signature a.sig .pln {
color: black;
}
.small-signature p {
color: #706f70;
line-height: 15px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 10px;
}
/**
* @styles parameters-returns Parameters and Returns
*
* @description
* Parameters and returns are shown inside of `.signature` but their styles are not dependant on it.
*
* @demo demos/parameters-returns.html
**/
.docs .parameters,
.docs .returns {
list-style-type: none;
margin: 0 0 15px;
border: 1px solid #cccccc;
background-color: #eae9e9;
padding: 0px 15px 10px;
border-radius: 5px;
}
.docs .parameters h4,
.docs .returns h4 {
background-color: #484848;
padding: 4px 15px;
color: #eae9e9;
margin: 0px -15px 5px;
}
.docs .parameters h4 .optional,
.docs .returns h4 .optional {
font-size: 10px;
line-height: 19px;
}
.docs .parameters h4 a,
.docs .returns h4 a {
color: #cccccc;
text-decoration: none;
}
.docs .parameters h4 a:hover,
.docs .returns h4 a:hover {
text-decoration: underline;
}
.docs .parameters li:first-child h4,
.docs .returns h4 {
border-radius: 5px 5px 0 0;
}
.docs .parameters h5,
.docs .returns h5 {
font-size: 14px;
font-weight: bold;
margin: 0 0 5px;
color: #484848;
}
.docs .parameters h4 code,
.docs .returns h4 code {
font-style: italic;
font-weight: normal;
background: none;
background-color: none;
}
.docs .parameters .options {
margin-right: 50px;
}
.docs .parameters .options .option,
.docs .returns .options .option {
margin: 0 -10px 15px;
border-top: 1px solid #cccccc;
list-style-type: none;
padding: 15px 25px 0 25px;
}
.docs .parameters .optional {
font-size: 8pt;
line-height: 20px;
}
.docs .parameters ul.options:last-child,
.docs .returns ul.options:last-child {
margin-bottom: 0;
}
.docs .parameters .description,
.docs .returns .description {
padding-bottom: 15px;
}
.docs .returns .description {
margin-top: 15px;
}
.docs .parameters :last-child .description,
.docs .returns :last-child .description {
margin-bottom: 0px;
padding-bottom: 0px;
}
.docs .demo ul {
list-style: none;
padding: 0;
}
.docs .demo li.tab {
display: block;
float: left;
padding: 6px 10px;
border-radius: 4px 4px 0 0;
}
.docs .demo li.tab:first-of-type {
margin-left: 5px;
}
.docs .demo li.tab.active {
color: #ffffff;
font-weight: bold;
background-color: #165489;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.docs .demo div.tab-content {
clear: both;
}
.docs .demo iframe {
width: 100%;
border: 1px solid #cccccc;
border-radius: 6px;
}
.docs body.style-demo {
background-color: #ffffff;
padding: 10px;
}
#low {
width: 960px;
margin: 0 auto;
font-size: 12px;
margin-bottom: 15px;
}
.api .group_0 {
margin-bottom: 40px;
}
/**
* @stylesheet sidebar.less Sidebar
* @parent Styles.baseline-elements 4
* @description
* Styles the sidebar navigation.
**/
.sidebar {
width: 255px;
margin-top: 20px;
background-color: #cccccc;
position: relative;
z-index: 1;
margin-bottom: 15px;
border-radius: 5px 0 0 5px;
}
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidebar li.active {
z-index: 20;
}
.sidebar .primary-grouping {
padding-bottom: 10px;
}
/**
* @styles sidebar-versions Versions
*
* @description
* Select menu used to display the documentation
*
* @demo demos/versions.html
**/
.sidebar .versions,
.sidebar #versions {
position: absolute;
right: 5px;
top: 7px;
font-size: 15px;
}
.sidebar .versions option,
.sidebar #versions option {
font-size: 15px;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.sidebar #versions {
border-color: #999999;
}
}
/**
* @styles sidebar-list List Items
*
* @description
* Styles the groups of lists shown on the sidebar.
*
* @demo demos/lists.html
**/
.sidebar .api {
/* This is the caret/triangle that points out of the container to the page on active items */
}
.sidebar .api .heading span {
text-transform: uppercase;
color: #484848;
line-height: 24px;
display: block;
font-weight: bold;
}
.sidebar .api li {
font-size: 15px;
line-height: 24px;
text-indent: 15px;
position: relative;
}
.sidebar .api li a {
display: block;
border: 1px solid #cccccc;
}
.sidebar .api ul ul li a:hover {
background: #cccccc;
}
.sidebar .api li li li li a {
font-size: 13px;
color: #706f70;
}
.sidebar .api > li > ul {
display: none;
}
.sidebar .api > li.active {
position: relative;
z-index: 0;
}
.sidebar .api > li.active > ul {
display: block;
}
.sidebar .api li.active.collapsed > :not(a) {
display: none;
}
.sidebar .api li li li {
text-indent: 30px;
}
.sidebar .api li li li li {
text-indent: 45px;
}
.sidebar .api ul.projects {
padding-top: 10px;
}
.sidebar .api a,
.sidebar .api a:hover {
text-decoration: none;
color: #484848;
font-style: normal;
}
.sidebar .api li.active {
z-index: 20;
}
.sidebar .api > li.active > a {
font-size: 17px;
font-weight: normal;
line-height: 40px;
color: #706f70;
display: block;
border: none;
}
.sidebar .api > li > a:hover,
.sidebar .api > li > a:hover {
color: #000000;
}
.sidebar .api li li.parent {
text-indent: 30px;
}
.sidebar .api li li li.parent {
text-indent: 40px;
}
.sidebar .api li li.parent:before {
left: 20px;
}
.sidebar .api li li li.parent li {
text-indent: 50px;
}
.sidebar .api li.parent:before {
content: "";
border-color: transparent #999999;
border-style: solid;
border-width: 0.3em 0 0.3em 0.5em;
display: block;
height: 0;
width: 0;
position: absolute;
top: 10px;
left: 30px;
}
.sidebar .api li.parent.expanded:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
z-index: 1;
}
.sidebar .api li li.active > a,
.sidebar .api .sidebar .api li li.active > a:hover {
position: relative;
display: block;
height: 25px;
margin-left: 1px;
}
.sidebar .api li li.active > a:hover {
background: none;
}
.sidebar .api li li.active > a:after {
position: absolute;
content: ' ';
right: -12px;
top: -7px;
height: 14px;
width: 14px;
z-index: 1;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #cccccc;
}
.sidebar .api li li.active > a:before {
position: absolute;
content: '';
display: block;
border-left: 4px solid #484848;
width: 5px;
height: 20px;
left: 5px;
top: 4px;
}
.sidebar .api li li li.active > a:before {
left: 20px;
}
/**
* @styles cascading-list Cascading List
*
* @description
* Styles `.sidebar-title` as a child of the `.api` list, and up to 5 levels before inheriting the styles of level 1.
*
* @demo demos/cascading-list.html
**/
.sidebar .api li.active > a.sidebar-title {
font-size: 24px;
background-color: #484848;
border-radius: 5px 0 0 0;
margin-bottom: 20px;
}
.sidebar .api li.active:nth-child(2) > a.sidebar-title,
.sidebar .api li.active:nth-child(3) > a.sidebar-title,
.sidebar .api li.active:nth-child(4) > a.sidebar-title,
.sidebar .api li.active:nth-child(5) > a.sidebar-title {
font-size: 18px;
border-radius: 0;
margin: -20px 0 20px 0;
}
.sidebar .api li.active:nth-child(2) > a.sidebar-title {
background: #626262;
}
.sidebar .api li.active:nth-child(3) > a.sidebar-title {
background: #7b7b7b;
}
.sidebar .api li.active:nth-child(4) > a.sidebar-title {
background: #949494;
}
.sidebar .api li.active:nth-child(5) > a.sidebar-title {
background: #aeaeae;
}
.sidebar .api.cascading {
/* The caret that points down from an active parent element to the child below */
}
.sidebar .api.cascading > .active > a {
color: #ffffff;
background: #484848;
border: none;
}
.sidebar .api.cascading > .parent {
z-index: 1;
text-indent: 15px;
margin-left: 0px;
margin-right: 0px;
}
.sidebar .api.cascading > .active:before,
.sidebar .api.cascading > .active:nth-child(2):before,
.sidebar .api.cascading > .active:nth-child(3):before,
.sidebar .api.cascading > .active:nth-child(4):before,
.sidebar .api.cascading > .active:nth-child(5):before {
position: absolute;
content: ' ';
left: 10px;
top: 30px;
z-index: -1;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #484848;
}
.sidebar .api.cascading > .active:nth-child(2):before {
border-top: 20px solid #626262;
}
.sidebar .api.cascading > .active:nth-child(3):before {
border-top: 20px solid #7b7b7b;
}
.sidebar .api.cascading > .active:nth-child(4):before {
border-top: 20px solid #949494;
}
.sidebar .api.cascading > .active:nth-child(5):before {
border-top: 20px solid #aeaeae;
}
.sidebar .api.cascading > li:nth-child(1) {
z-index: 20;
}
.sidebar .api.cascading > li:nth-child(2) {
z-index: 19;
}
.sidebar .api.cascading > li:nth-child(3) {
z-index: 18;
}
.sidebar .api.cascading > li:nth-child(4) {
z-index: 17;
}
.sidebar .api.cascading > li:nth-child(5) {
z-index: 16;
}
.sidebar .api.cascading > li:nth-child(6) {
z-index: 15;
}
.sidebar .api.cascading > li:nth-child(7) {
z-index: 14;
}
.sidebar .api.cascading > li:nth-child(8) {
z-index: 13;
}
.sidebar .api.cascading > li:nth-child(9) {
z-index: 12;
}
.sidebar .api.cascading > li:nth-child(10) {
z-index: 11;
}
/**
* @stylesheet Swatches
* @parent style.baseline-elements
* @description
* Styles used to lay out the grids of swatches for documentation purposes.
**/
.swatches-list {
list-style: none;
margin: 10px;
}
.swatches-list li {
width: 20%;
float: left;
height: 100px;
text-align: center;
margin: 1px;
}
.swatch-color {
width: 100%;
height: 50px;
display: block;
margin-bottom: 5px;
}
.guides .sidebar {
width: 255px;
margin-top: 20px;
}
.guides .content {
margin-top: 20px;
padding: 20px;
width: 662px;
background-color: #ffffff;
border: 1px solid #cccccc;
border-left-style: none;
border-bottom-style: none;
}
.guides .content ul,
.guides .content ol:not(.linenums) {
margin-left: 0;
font-size: 16px;
line-height: 24px;
margin-top: 0;
margin-bottom: 15px;
line-height: 18px;
}
.guides .container.api {
margin-bottom: 20px;
}
/**
* @stylesheet ie.less IE Corrections
* @parent Styles.other
*
* @description
* These styles are to correct the display differences specific to Internet Explorer.
**/
.ie .search:before {
font-family: Bitstrap;
content: "\e012";
display: block;
position: absolute;
left: 17px;
color: #cccccc;
}
.ie .sidebar .api li li.active > a,
.ie .sidebar .api li li.active > a:hover,
.ie .sidebar .api li li.active > a:before,
.ie .sidebar .api li li.active > a:before {
background-image: none;
background-color: #ffffff;
background: #ffffff;
}
.ie .sidebar .api li li.active > a:before,
.ie .sidebar .api li li.active > a:before {
display: none;
}