You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
208 lines
3.5 KiB
208 lines
3.5 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # 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; |
|
direction: ltr; |
|
|
|
@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: @content-padding-large; |
|
background: fade(#85ee95, 12%); |
|
pointer-events: none; |
|
white-space: pre; |
|
line-height: inherit; |
|
|
|
&: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; |
|
background-color: #fdfdfd; |
|
background-image: -webkit-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%); |
|
background-image: -moz-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%); |
|
background-image: -ms-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%); |
|
background-image: -o-linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%); |
|
background-image: linear-gradient(transparent 50%, fade(@color-primary-700, 2.5%) 50%); |
|
background-size: 3em 3em; |
|
background-origin: content-box; |
|
.border-left-radius(0); |
|
|
|
> code[data-language] { |
|
display: block; |
|
|
|
&:before { |
|
content: attr(data-language); |
|
background-color: #f8f8f8; |
|
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-left: 36px; |
|
} |
|
}
|
|
|