UNPKG

2.62 kBCSSView Raw
1/*
2 * Based on Plugin: Syntax Highlighter CB
3 * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js
4 * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.
5 * Version: 1.0.0
6 * Author: c.bavota
7 * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */
8/* http://cbavota.bitbucket.org/syntax-highlighter/ */
9
10/* ===== ===== */
11code[class*="language-"],
12pre[class*="language-"] {
13 color: #fff;
14 text-shadow: 0 1px 1px #000;
15 font-family: Menlo, Monaco, "Courier New", monospace;
16 direction: ltr;
17 text-align: left;
18 word-spacing: normal;
19 white-space: pre;
20 word-wrap: normal;
21 line-height: 1.4;
22 background: none;
23 border: 0;
24
25 -moz-tab-size: 4;
26 -o-tab-size: 4;
27 tab-size: 4;
28
29 -webkit-hyphens: none;
30 -moz-hyphens: none;
31 -ms-hyphens: none;
32 hyphens: none;
33}
34
35pre[class*="language-"] code {
36 float: left;
37 padding: 0 15px 0 0;
38}
39
40pre[class*="language-"],
41:not(pre) > code[class*="language-"] {
42 background: #222;
43}
44
45/* Code blocks */
46pre[class*="language-"] {
47 padding: 15px;
48 margin: 1em 0;
49 overflow: auto;
50 -moz-border-radius: 8px;
51 -webkit-border-radius: 8px;
52 border-radius: 8px;
53}
54
55/* Inline code */
56:not(pre) > code[class*="language-"] {
57 padding: 5px 10px;
58 line-height: 1;
59 -moz-border-radius: 3px;
60 -webkit-border-radius: 3px;
61 border-radius: 3px;
62}
63
64.token.comment,
65.token.prolog,
66.token.doctype,
67.token.cdata {
68 color: #797979;
69}
70
71.token.selector,
72.token.operator,
73.token.punctuation {
74 color: #fff;
75}
76
77.token.namespace {
78 opacity: .7;
79}
80
81.token.tag,
82.token.boolean {
83 color: #ffd893;
84}
85
86.token.atrule,
87.token.attr-value,
88.token.hex,
89.token.string {
90 color: #B0C975;
91}
92
93.token.property,
94.token.entity,
95.token.url,
96.token.attr-name,
97.token.keyword {
98 color: #c27628;
99}
100
101.token.regex {
102 color: #9B71C6;
103}
104
105.token.entity {
106 cursor: help;
107}
108
109.token.function,
110.token.constant {
111 color: #e5a638;
112}
113
114.token.variable {
115 color: #fdfba8;
116}
117
118.token.number {
119 color: #8799B0;
120}
121
122.token.important,
123.token.deliminator {
124 color: #E45734;
125}
126
127/* Line highlight plugin */
128.line-highlight.line-highlight {
129 background: rgba(255, 255, 255, .2);
130}
131
132.line-highlight.line-highlight:before,
133.line-highlight.line-highlight[data-end]:after {
134 top: .3em;
135 background-color: rgba(255, 255, 255, .3);
136 color: #fff;
137 -moz-border-radius: 8px;
138 -webkit-border-radius: 8px;
139 border-radius: 8px;
140}
141
142/* for line numbers */
143/* span instead of span:before for a two-toned border */
144.line-numbers .line-numbers-rows > span {
145 border-right: 3px #d9d336 solid;
146}