/* ------------------------------------------------------------------------------
*
* # Prism
*
* Lightweight, extensible syntax highlighter
*
* Version: 1.0
* Latest update: May 10, 2015
*
* ---------------------------------------------------------------------------- */
// Base
code,
pre {
&[class*="language-"] {
text-shadow: 0 1px #fff;
word-break: normal;
line-height: 1.5;
@media print {
text-shadow: none;
}
}
}
// Token colors
.token {
&.comment,
&.prolog,
&.doctype,
&.cdata,
&.punctuation {
color: #999;
}
&.property,
&.tag,
&.boolean,
&.number,
&.constant,
&.symbol {
color: #905;
}
&.selector,
&.attr-name,
&.string,
&.builtin {
color: #690;
}
&.operator,
&.entity,
&.url,
.language-css &.string,
.style &.string,
&.variable {
color: #a67f59;
background: hsla(0,0%,100%,.5);
}
&.atrule,
&.attr-value,
&.keyword {
color: #07a;
}
&.function {
color: #DD4A68;
}
&.regex,
&.important {
color: #e90;
}
&.important {
font-weight: bold;
}
&.entity {
cursor: help;
}
}
.namespace {
.opacity(0.7);
}
// Line highlight
.line-highlight {
position: absolute;
left: 0;
right: 0;
margin-top: 1em;
background: fade(#85ee95, 12%);
pointer-events: none;
white-space: pre;
line-height: @line-height-base;
&:before,
&:after {
content: attr(data-start);
position: absolute;
top: 0px;
left: 10px;
padding: 2px;
text-align: center;
font-size: 10px;
color: @text-muted;
}
&[data-end]:after {
content: attr(data-end);
top: auto;
bottom: 0;
}
}
// Line numbers
.line-numbers {
pre& {
position: relative;
padding-left: 50px;
counter-reset: linenumber;
> code {
position: relative;
}
}
.line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -50px;
width: 36px; // works for line-numbers below 1000 lines
letter-spacing: -1px;
border-right: 1px solid #999;
.user-select(none);
> span {
pointer-events: none;
display: block;
counter-increment: linenumber;
&:before {
content: counter(linenumber);
color: @text-muted;
display: block;
padding-right: 10px;
text-align: right;
}
}
}
}
// Code blocks
pre {
&[class*="language-"] {
overflow: auto;
position: relative;
border-left-width: 3px;
border-left-color: @brand-primary;
.border-left-radius(0);
> code[data-language] {
display: block;
&:before {
content: attr(data-language);
background-color: #EEE;
display: inline-block;
position: absolute;
top: 0px;
right: 0px;
font-size: @font-size-mini;
border-radius: 0 0 0 2px;
padding: 4px 8px;
text-shadow: none;
color: @text-color;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
}
&.line-numbers > code[data-language]:before {
top: -15px;
right: -15px;
}
}
&[data-line] {
position: relative;
padding: 12px 0 12px 36px;
}
}