Skip to content

Commit c3e9d93

Browse files
jzaeffererjzaefferer
committed
Syntax highlighting and interactive demos
1 parent 2268288 commit c3e9d93

File tree

3 files changed

+284
-0
lines changed

3 files changed

+284
-0
lines changed

‎api-demo.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// TODO convert to a WP plugin?
2+
3+
(function() {
4+
$( ".entry-example" ).each(function() {
5+
var iframeSrc,
6+
src = $( this ).find( ".syntaxhighlighter" ),
7+
output = $( this ).find( ".code-demo" );
8+
9+
if ( !src.length || !output.length ) {
10+
return;
11+
}
12+
13+
// Get the original source
14+
iframeSrc = src.find( "td.code .line" ).map(function() {
15+
// Convert non-breaking spaces from highlighted code to normal spaces
16+
return $( this ).text().replace( /\xa0/g, " " );
17+
// Restore new lines from original source
18+
}).get().join( "\n" );
19+
20+
iframeSrc = iframeSrc
21+
// Insert styling for the live demo that we don't want in the
22+
// highlighted code
23+
.replace( "</head>",
24+
"<style>" +
25+
"html, body { border:0; margin:0; padding:0; }" +
26+
"body { font-family: 'Helvetica', 'Arial', 'Verdana', 'sans-serif'; }" +
27+
"</style>" +
28+
"</head>" )
29+
// IE <10 executes scripts in the order in which they're loaded,
30+
// not the order in which they're written. So we need to defer inline
31+
// scripts so that scripts which need to be fetched are executed first.
32+
.replace( /<script>([\s\S]+)<\/script>/,
33+
"<script>" +
34+
"window.onload = function() {" +
35+
"$1" +
36+
"};" +
37+
"</script>" );
38+
39+
var iframe = document.createElement( "iframe" );
40+
iframe.width = "100%";
41+
iframe.height = output.attr( "data-height" ) || 250;
42+
output.append( iframe );
43+
44+
var doc = (iframe.contentWindow || iframe.contentDocument).document;
45+
doc.write( iframeSrc );
46+
doc.close();
47+
});
48+
}());

‎functions.php

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?php
2+
function scripts() {
3+
echo '<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>' . "\n";
4+
echo '<script src="' . get_stylesheet_directory_uri() . '/api-demo.js"></script>' . "\n";
5+
}
6+
add_action( 'wp_footer', 'scripts' );
7+
?>

‎style.css

+229
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,232 @@ Description: jQuery Validation Plugin Theme based on twentytwelve
88
*/
99

1010
@import url("../twentytwelve/style.css");
11+
12+
/* Syntax Highlighting ---------------------- */
13+
14+
pre, code {
15+
font-family: "source-code-pro", Consolas, monospace !important;
16+
word-spacing: 0;
17+
}
18+
pre code {
19+
display: block; padding: 0.5em;
20+
color: #333;
21+
background: #f8f8ff
22+
}
23+
24+
pre .comment,
25+
pre .template_comment,
26+
pre .diff .header,
27+
pre .javadoc {
28+
color: #998;
29+
font-style: italic
30+
}
31+
32+
pre .keyword,
33+
pre .css .rule .keyword,
34+
pre .winutils,
35+
pre .javascript .title,
36+
pre .nginx .title,
37+
pre .subst,
38+
pre .request,
39+
pre .status {
40+
color: #333;
41+
font-weight: bold
42+
}
43+
44+
pre .number,
45+
pre .hexcolor,
46+
pre .ruby .constant {
47+
color: #099;
48+
}
49+
50+
pre .string,
51+
pre .tag .value,
52+
pre .phpdoc,
53+
pre .tex .formula {
54+
color: #d14
55+
}
56+
57+
pre .title,
58+
pre .id {
59+
color: #900;
60+
font-weight: bold
61+
}
62+
63+
pre .javascript .title,
64+
pre .lisp .title,
65+
pre .clojure .title,
66+
pre .subst {
67+
font-weight: normal
68+
}
69+
70+
pre .class .title,
71+
pre .haskell .type,
72+
pre .vhdl .literal,
73+
pre .tex .command {
74+
color: #458;
75+
font-weight: bold
76+
}
77+
78+
pre .tag,
79+
pre .tag .title,
80+
pre .rules .property,
81+
pre .django .tag .keyword {
82+
color: #000080;
83+
font-weight: normal
84+
}
85+
86+
pre .attribute,
87+
pre .variable,
88+
pre .lisp .body {
89+
color: #008080
90+
}
91+
92+
pre .regexp {
93+
color: #009926
94+
}
95+
96+
pre .class {
97+
color: #458;
98+
font-weight: bold
99+
}
100+
101+
pre .symbol,
102+
pre .ruby .symbol .string,
103+
pre .lisp .keyword,
104+
pre .tex .special,
105+
pre .prompt {
106+
color: #990073
107+
}
108+
109+
pre .built_in,
110+
pre .lisp .title,
111+
pre .clojure .built_in {
112+
color: #0086b3
113+
}
114+
115+
pre .preprocessor,
116+
pre .pi,
117+
pre .doctype,
118+
pre .shebang,
119+
pre .cdata {
120+
color: #999;
121+
font-weight: bold
122+
}
123+
124+
pre .deletion {
125+
background: #fdd
126+
}
127+
128+
pre .addition {
129+
background: #dfd
130+
}
131+
132+
pre .diff .change {
133+
background: #0086b3
134+
}
135+
136+
pre .chunk {
137+
color: #aaa
138+
}
139+
140+
.syntaxhighlighter a,
141+
.syntaxhighlighter div,
142+
.syntaxhighlighter pre,
143+
.syntaxhighlighter code,
144+
.syntaxhighlighter table,
145+
.syntaxhighlighter table td,
146+
.syntaxhighlighter table tr,
147+
.syntaxhighlighter table tbody,
148+
.syntaxhighlighter table thead,
149+
.syntaxhighlighter table caption,
150+
.syntaxhighlighter textarea {
151+
border-radius: 0 0 0 0 !important;
152+
background: none !important;
153+
bottom: auto !important;
154+
float: none !important;
155+
height: auto !important;
156+
left: auto !important;
157+
line-height: 1.1em !important;
158+
margin: 0 !important;
159+
outline: 0 !important;
160+
overflow: visible !important;
161+
padding: 0 !important;
162+
position: static !important;
163+
right: auto !important;
164+
text-align: left !important;
165+
top: auto !important;
166+
vertical-align: baseline !important;
167+
width: auto !important;
168+
box-sizing: content-box !important;
169+
font-family: "source-code-pro", Consolas, monospace !important;
170+
font-weight: normal !important;
171+
font-style: normal !important;
172+
font-size: 1em !important;
173+
min-height: inherit !important;
174+
min-height: auto !important;
175+
}
176+
.syntaxhighlighter {
177+
width: 100% !important;
178+
margin: 1em 0 1em 0 !important;
179+
padding: 1em 0;
180+
position: relative !important;
181+
overflow: auto !important;
182+
font-size: 1em !important;
183+
background: #eee;
184+
}
185+
.syntaxhighlighter.source {
186+
overflow: hidden !important;
187+
}
188+
.syntaxhighlighter .line {
189+
white-space: pre !important;
190+
}
191+
.syntaxhighlighter table {
192+
width: 100% !important;
193+
}
194+
.syntaxhighlighter table caption {
195+
text-align: left !important;
196+
padding: .5em 0 0.5em 1em !important;
197+
}
198+
.syntaxhighlighter table td.code {
199+
width: 100% !important;
200+
}
201+
.syntaxhighlighter table td.code .container {
202+
position: relative !important;
203+
}
204+
.syntaxhighlighter table td.code .container textarea {
205+
box-sizing: border-box !important;
206+
position: absolute !important;
207+
left: 0 !important;
208+
top: 0 !important;
209+
width: 100% !important;
210+
height: 100% !important;
211+
border: none !important;
212+
background: white !important;
213+
padding-left: 1em !important;
214+
overflow: hidden !important;
215+
white-space: pre !important;
216+
}
217+
.syntaxhighlighter table td.gutter .line {
218+
text-align: right !important;
219+
padding: 0 0.5em 0 1em !important;
220+
}
221+
.syntaxhighlighter table td.code .line {
222+
padding: 0 0.5em !important;
223+
}
224+
.syntaxhighlighter.nogutter td.code .container textarea,
225+
.syntaxhighlighter.nogutter td.code .line {
226+
padding-left: 1em !important;
227+
}
228+
229+
.syntaxhighlighter table td.gutter {
230+
border-right: 2px solid #999;
231+
}
232+
233+
.syntaxhighlighter {
234+
border-radius: 5px;
235+
}
236+
237+
#content .syntaxhighlighter tr {
238+
border-bottom: none;
239+
}

0 commit comments

Comments
 (0)