2015-03-04 08:21:10 -05:00
|
|
|
.l-main-section
|
|
|
|
|
h2 Code Examples
|
|
|
|
|
|
|
|
|
|
p To create a code example like the one below, simple copy the code
|
|
|
|
|
|
|
|
|
|
pre.prettyprint.linenums
|
|
|
|
|
code.
|
|
|
|
|
pre.prettyprint.linenums
|
|
|
|
|
code.
|
|
|
|
|
//SOME CODE
|
|
|
|
|
var name = "Alex Wolfe";
|
|
|
|
|
alert(name);
|
|
|
|
|
|
2015-03-11 20:56:08 -04:00
|
|
|
.l-sub-section
|
|
|
|
|
h3 Specify starting line number
|
|
|
|
|
|
|
|
|
|
pre(class="prettyprint linenums:4")
|
|
|
|
|
code.
|
|
|
|
|
pre.prettyprint.linenums:4
|
|
|
|
|
var title = "This starts on line four";
|
|
|
|
|
|
2015-03-16 00:34:38 -04:00
|
|
|
.l-sub-section
|
|
|
|
|
h3 Code Highlighting
|
|
|
|
|
p.
|
|
|
|
|
There are three types of highlights avialable
|
|
|
|
|
<strong>Outlined</strong>, <strong>Pink</strong>, and
|
|
|
|
|
<strong>Black</strong>. You can see examples below and
|
|
|
|
|
the class names needed for each type.
|
|
|
|
|
|
|
|
|
|
pre.prettyprint.linenums
|
|
|
|
|
code.
|
|
|
|
|
// Pink Background Version
|
|
|
|
|
// class="pnk"
|
|
|
|
|
var elephants = "The <span class="pnk">pink</span> elephants were marching...";
|
|
|
|
|
|
|
|
|
|
// Black Background Version
|
|
|
|
|
// class="blk"
|
|
|
|
|
var night = "The night was pitch <span class="blk">black</span>.";
|
|
|
|
|
|
|
|
|
|
// Outlined Version
|
|
|
|
|
// class="otl"
|
|
|
|
|
var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";
|
|
|
|
|
|
2015-03-04 08:21:10 -05:00
|
|
|
.l-main-section
|
|
|
|
|
h2 Alerts
|
|
|
|
|
|
|
|
|
|
p Single line statments that are additional or critical to the content of a section or page.
|
|
|
|
|
|
|
|
|
|
.alert.is-critical A very <strong>critical</strong> alert
|
|
|
|
|
.alert.is-important A very <strong>important</strong> alert
|
|
|
|
|
.alert.is-helpful A very <strong>helpful</strong> alert
|
|
|
|
|
|
|
|
|
|
pre.prettyprint.linenums
|
|
|
|
|
code.
|
|
|
|
|
.alert.is-critical A very <strong>critical</strong> alert
|
|
|
|
|
.alert.is-important A very <strong>important</strong> alert
|
|
|
|
|
.alert.is-helpful A very <strong>helpful</strong> alert
|
