code highlighting style guide
This commit is contained in:
parent
e334c4469e
commit
d914789abf
|
@ -19,6 +19,31 @@
|
||||||
pre.prettyprint.linenums:4
|
pre.prettyprint.linenums:4
|
||||||
var title = "This starts on line four";
|
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
|
.l-main-section
|
||||||
h2 Alerts
|
h2 Alerts
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
.kwd {
|
||||||
color: $mist;
|
color: $mist;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue