code highlighting style guide

This commit is contained in:
Alex Wolfe 2015-03-15 21:34:38 -07:00
parent e334c4469e
commit d914789abf
2 changed files with 40 additions and 0 deletions

View File

@ -19,6 +19,31 @@
pre.prettyprint.linenums:4
var title = "This starts on line four";
.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 ";
.l-main-section
h2 Alerts

View File

@ -81,6 +81,21 @@
*
*/
.pnk,
.blk {
border-radius: 2px;
padding: 2px 4px;
}
.pnk {
background: $squid;
color: $snow;
}
.blk {
background: $coal;
}
.otl {
outline: 1px solid rgba(snow, .56);
}
.kwd {
color: $mist;
}