Examples: fix syntax-block in correct template location

Author: pepc84

examples/acceleration-with-vectors.html

@@ -121,7 +121,7 @@ <h1>Acceleration With Vectors</h1>
         <span>acceleration-with-vectors.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Acceleration with Vectors
  * by Daniel Shiffman.
  *
@@ -146,7 +146,7 @@ <h1>Acceleration With Vectors</h1>
   // Display the Mover
   mover-&gt;display();
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/additive-wave.html

@@ -149,7 +149,7 @@ <h1>Additive Wave</h1>
         <span>additive-wave.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Additive Wave
  * by Daniel Shiffman.
  *
@@ -207,7 +207,7 @@ <h1>Additive Wave</h1>
     calcWave();
     renderWave();
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/alpha-mask.html

@@ -96,7 +96,7 @@ <h1>Alpha Mask</h1>
         <span>alpha-mask.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Alpha Mask. 
  * 
  * Loads a "mask" for an image to specify the transparency 
@@ -124,7 +124,7 @@ <h1>Alpha Mask</h1>
     image(img, width / 2, height / 2);
     image(img, mouseX, mouseY);
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/animated-sprite.html

@@ -124,7 +124,7 @@ <h1>Animated Sprite</h1>
         <span>animated-sprite.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Animated Sprite (Shifty + Teddy)
  * by James Paterson.
  * Translated to C++ Mode.
@@ -178,7 +178,7 @@ <h1>Animated Sprite</h1>
         animation2-&gt;display(xpos - animation2-&gt;getWidth() / 2, ypos);
     }
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/arctangent.html

@@ -129,7 +129,7 @@ <h1>Arctangent</h1>
         <span>arctangent.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Arctangent.
  *
  * Move the mouse to change the direction of the eyes.
@@ -173,7 +173,7 @@ <h1>Arctangent</h1>
     e2.update(mouseX, mouseY); e2.display();
     e3.update(mouseX, mouseY); e3.display();
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/arm.html

@@ -106,7 +106,7 @@ <h1>Arm</h1>
         <span>arm.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Arm. 
  * 
  * The angle of each segment is controlled with the mouseX and
@@ -147,7 +147,7 @@ <h1>Arm</h1>
     rotate(a);
     line(0, 0, segLength, 0);
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/array-2d.html

@@ -105,7 +105,7 @@ <h1>Array 2D</h1>
         <span>array-2d.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Array 2D.
  *
  * Demonstrates the syntax for creating a two-dimensional (2D) array.
@@ -142,7 +142,7 @@ <h1>Array 2D</h1>
         }
     }
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/array-objects.html

@@ -145,7 +145,7 @@ <h1>Array Objects</h1>
         <span>array-objects.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Array Objects.
  *
  * Demonstrates the syntax for creating an array of custom objects.
@@ -209,7 +209,7 @@ <h1>Array Objects</h1>
         mods[i].display();
     }
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/array.html

@@ -113,7 +113,7 @@ <h1>Array</h1>
         <span>array.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">/**
+      <div class="syntax-block">/**
  * Array.
  *
  * An array is a list of data. Each piece of data in an array
@@ -158,7 +158,7 @@ <h1>Array</h1>
         line(i, y1, i, y2);
     }
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>

examples/arraylist-of-objects.html

@@ -125,7 +125,7 @@ <h1>ArrayList of objects</h1>
         <span>arraylist-of-objects.pde</span>
         <button class="copy-btn" onclick="copyCode()">Copy</button>
       </div>
-      <pre id="code-pre">class Ball {
+      <div class="syntax-block">class Ball {
 public:
   float x;
   float y;
@@ -180,7 +180,7 @@ <h1>ArrayList of objects</h1>
 void mousePressed() {
   balls.add(new Ball(mouseX, mouseY, ballWidth));
 }
-</pre>
+</div>
   </div>
 </div>
 <footer>