Skip to content

Commit b10bd7f

Browse files
pepc84pepc84
committed
use fromTextArea for syntax highlighting - no flash
1 parent 9bf67df commit b10bd7f

163 files changed

Lines changed: 3077 additions & 647 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/acceleration-with-vectors.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -123,7 +122,7 @@ <h1>Acceleration With Vectors</h1>
123122
<span>acceleration-with-vectors.pde</span>
124123
<button class="copy-btn" onclick="copyCode()">Copy</button>
125124
</div>
126-
<pre id="code-pre">/**
125+
<textarea id="code-pre" style="display:none">/**
127126
* Acceleration with Vectors
128127
* by Daniel Shiffman.
129128
*
@@ -148,8 +147,24 @@ <h1>Acceleration With Vectors</h1>
148147
// Display the Mover
149148
mover-&gt;display();
150149
}
151-
</pre>
150+
</textarea>
152151
</div>
152+
<script>
153+
(function(){
154+
var ta = document.getElementById('code-pre');
155+
var cm = CodeMirror.fromTextArea(ta, {
156+
mode: 'cppmode',
157+
theme: 'cppmode',
158+
readOnly: true,
159+
lineNumbers: false,
160+
lineWrapping: false,
161+
viewportMargin: Infinity,
162+
});
163+
cm.getWrapperElement().style.fontSize = '13px';
164+
cm.getWrapperElement().style.lineHeight = '1.6';
165+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
166+
})();
167+
</script>
153168
</div>
154169
</div>
155170
<footer>

‎examples/additive-wave.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -151,7 +150,7 @@ <h1>Additive Wave</h1>
151150
<span>additive-wave.pde</span>
152151
<button class="copy-btn" onclick="copyCode()">Copy</button>
153152
</div>
154-
<pre id="code-pre">/**
153+
<textarea id="code-pre" style="display:none">/**
155154
* Additive Wave
156155
* by Daniel Shiffman.
157156
*
@@ -209,8 +208,24 @@ <h1>Additive Wave</h1>
209208
calcWave();
210209
renderWave();
211210
}
212-
</pre>
211+
</textarea>
213212
</div>
213+
<script>
214+
(function(){
215+
var ta = document.getElementById('code-pre');
216+
var cm = CodeMirror.fromTextArea(ta, {
217+
mode: 'cppmode',
218+
theme: 'cppmode',
219+
readOnly: true,
220+
lineNumbers: false,
221+
lineWrapping: false,
222+
viewportMargin: Infinity,
223+
});
224+
cm.getWrapperElement().style.fontSize = '13px';
225+
cm.getWrapperElement().style.lineHeight = '1.6';
226+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
227+
})();
228+
</script>
214229
</div>
215230
</div>
216231
<footer>

‎examples/alpha-mask.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -98,7 +97,7 @@ <h1>Alpha Mask</h1>
9897
<span>alpha-mask.pde</span>
9998
<button class="copy-btn" onclick="copyCode()">Copy</button>
10099
</div>
101-
<pre id="code-pre">/**
100+
<textarea id="code-pre" style="display:none">/**
102101
* Alpha Mask.
103102
*
104103
* Loads a "mask" for an image to specify the transparency
@@ -126,8 +125,24 @@ <h1>Alpha Mask</h1>
126125
image(img, width / 2, height / 2);
127126
image(img, mouseX, mouseY);
128127
}
129-
</pre>
128+
</textarea>
130129
</div>
130+
<script>
131+
(function(){
132+
var ta = document.getElementById('code-pre');
133+
var cm = CodeMirror.fromTextArea(ta, {
134+
mode: 'cppmode',
135+
theme: 'cppmode',
136+
readOnly: true,
137+
lineNumbers: false,
138+
lineWrapping: false,
139+
viewportMargin: Infinity,
140+
});
141+
cm.getWrapperElement().style.fontSize = '13px';
142+
cm.getWrapperElement().style.lineHeight = '1.6';
143+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
144+
})();
145+
</script>
131146
</div>
132147
</div>
133148
<footer>

‎examples/animated-sprite.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -126,7 +125,7 @@ <h1>Animated Sprite</h1>
126125
<span>animated-sprite.pde</span>
127126
<button class="copy-btn" onclick="copyCode()">Copy</button>
128127
</div>
129-
<pre id="code-pre">/**
128+
<textarea id="code-pre" style="display:none">/**
130129
* Animated Sprite (Shifty + Teddy)
131130
* by James Paterson.
132131
* Translated to C++ Mode.
@@ -180,8 +179,24 @@ <h1>Animated Sprite</h1>
180179
animation2-&gt;display(xpos - animation2-&gt;getWidth() / 2, ypos);
181180
}
182181
}
183-
</pre>
182+
</textarea>
184183
</div>
184+
<script>
185+
(function(){
186+
var ta = document.getElementById('code-pre');
187+
var cm = CodeMirror.fromTextArea(ta, {
188+
mode: 'cppmode',
189+
theme: 'cppmode',
190+
readOnly: true,
191+
lineNumbers: false,
192+
lineWrapping: false,
193+
viewportMargin: Infinity,
194+
});
195+
cm.getWrapperElement().style.fontSize = '13px';
196+
cm.getWrapperElement().style.lineHeight = '1.6';
197+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
198+
})();
199+
</script>
185200
</div>
186201
</div>
187202
<footer>

‎examples/arctangent.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -131,7 +130,7 @@ <h1>Arctangent</h1>
131130
<span>arctangent.pde</span>
132131
<button class="copy-btn" onclick="copyCode()">Copy</button>
133132
</div>
134-
<pre id="code-pre">/**
133+
<textarea id="code-pre" style="display:none">/**
135134
* Arctangent.
136135
*
137136
* Move the mouse to change the direction of the eyes.
@@ -175,8 +174,24 @@ <h1>Arctangent</h1>
175174
e2.update(mouseX, mouseY); e2.display();
176175
e3.update(mouseX, mouseY); e3.display();
177176
}
178-
</pre>
177+
</textarea>
179178
</div>
179+
<script>
180+
(function(){
181+
var ta = document.getElementById('code-pre');
182+
var cm = CodeMirror.fromTextArea(ta, {
183+
mode: 'cppmode',
184+
theme: 'cppmode',
185+
readOnly: true,
186+
lineNumbers: false,
187+
lineWrapping: false,
188+
viewportMargin: Infinity,
189+
});
190+
cm.getWrapperElement().style.fontSize = '13px';
191+
cm.getWrapperElement().style.lineHeight = '1.6';
192+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
193+
})();
194+
</script>
180195
</div>
181196
</div>
182197
<footer>

‎examples/arm.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -108,7 +107,7 @@ <h1>Arm</h1>
108107
<span>arm.pde</span>
109108
<button class="copy-btn" onclick="copyCode()">Copy</button>
110109
</div>
111-
<pre id="code-pre">/**
110+
<textarea id="code-pre" style="display:none">/**
112111
* Arm.
113112
*
114113
* The angle of each segment is controlled with the mouseX and
@@ -149,8 +148,24 @@ <h1>Arm</h1>
149148
rotate(a);
150149
line(0, 0, segLength, 0);
151150
}
152-
</pre>
151+
</textarea>
153152
</div>
153+
<script>
154+
(function(){
155+
var ta = document.getElementById('code-pre');
156+
var cm = CodeMirror.fromTextArea(ta, {
157+
mode: 'cppmode',
158+
theme: 'cppmode',
159+
readOnly: true,
160+
lineNumbers: false,
161+
lineWrapping: false,
162+
viewportMargin: Infinity,
163+
});
164+
cm.getWrapperElement().style.fontSize = '13px';
165+
cm.getWrapperElement().style.lineHeight = '1.6';
166+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
167+
})();
168+
</script>
154169
</div>
155170
</div>
156171
<footer>

‎examples/array-2d.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -107,7 +106,7 @@ <h1>Array 2D</h1>
107106
<span>array-2d.pde</span>
108107
<button class="copy-btn" onclick="copyCode()">Copy</button>
109108
</div>
110-
<pre id="code-pre">/**
109+
<textarea id="code-pre" style="display:none">/**
111110
* Array 2D.
112111
*
113112
* Demonstrates the syntax for creating a two-dimensional (2D) array.
@@ -144,8 +143,24 @@ <h1>Array 2D</h1>
144143
}
145144
}
146145
}
147-
</pre>
146+
</textarea>
148147
</div>
148+
<script>
149+
(function(){
150+
var ta = document.getElementById('code-pre');
151+
var cm = CodeMirror.fromTextArea(ta, {
152+
mode: 'cppmode',
153+
theme: 'cppmode',
154+
readOnly: true,
155+
lineNumbers: false,
156+
lineWrapping: false,
157+
viewportMargin: Infinity,
158+
});
159+
cm.getWrapperElement().style.fontSize = '13px';
160+
cm.getWrapperElement().style.lineHeight = '1.6';
161+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
162+
})();
163+
</script>
149164
</div>
150165
</div>
151166
<footer>

‎examples/array-objects.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@
3636
pre { padding: 0.75rem 1rem; font-family: "SF Mono","Fira Code",monospace; font-size: 13px; line-height: 1.6; overflow-x: auto; white-space: pre; background: #0d0d0d; color: #ccc; border-radius: 8px; margin-bottom: 1.25rem; }
3737
.welcome h1 { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; }
3838
.welcome p { color: #555; line-height: 1.8; max-width: 500px; }
39-
.cm-static-wrap { margin-bottom: 1.25rem; }
40-
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0; font-family: "SF Mono","Fira Code",monospace; }
39+
.cm-static-wrap .CodeMirror { height: auto; border-radius: 8px; font-size: 13px; line-height: 1.6; padding: 0.25rem 0; margin-bottom: 1.25rem; font-family: "SF Mono","Fira Code",monospace; }
4140
.cm-static-wrap .CodeMirror-scroll { overflow: hidden !important; max-height: none; }
4241
footer { border-top: 1px solid #e0e0e0; padding: 2rem; text-align: center; font-size: 13px; color: #888; }
4342
.footer-contact { margin-top: 0.4rem; font-size: 12px; }
@@ -147,7 +146,7 @@ <h1>Array Objects</h1>
147146
<span>array-objects.pde</span>
148147
<button class="copy-btn" onclick="copyCode()">Copy</button>
149148
</div>
150-
<pre id="code-pre">/**
149+
<textarea id="code-pre" style="display:none">/**
151150
* Array Objects.
152151
*
153152
* Demonstrates the syntax for creating an array of custom objects.
@@ -211,8 +210,24 @@ <h1>Array Objects</h1>
211210
mods[i].display();
212211
}
213212
}
214-
</pre>
213+
</textarea>
215214
</div>
215+
<script>
216+
(function(){
217+
var ta = document.getElementById('code-pre');
218+
var cm = CodeMirror.fromTextArea(ta, {
219+
mode: 'cppmode',
220+
theme: 'cppmode',
221+
readOnly: true,
222+
lineNumbers: false,
223+
lineWrapping: false,
224+
viewportMargin: Infinity,
225+
});
226+
cm.getWrapperElement().style.fontSize = '13px';
227+
cm.getWrapperElement().style.lineHeight = '1.6';
228+
cm.getWrapperElement().style.borderRadius = '0 0 8px 8px';
229+
})();
230+
</script>
216231
</div>
217232
</div>
218233
<footer>

0 commit comments

Comments
 (0)