Code

Mind your behaviour
and look good!

Table of Contents

A reference page for any HTML, CSS, JS - ( JavaScript ), PHP or any other code that I use in my Clan Wallace Website.

PrettyPrint

PettyPrint is used for syntax highlighting of code displayed on my web pages. Let's see how this can be enhanced with a bit of JavaScript. Select the buttons to toggle the code display on and off.

CSS Code Display (Select me to toggle code)

Here is an example of a snippet of CSS that styles this code box. The usage for this would be mainly for tutorials and demonstrations. Select the button again to hide or reveal this content.

/* CSS */
pre.prettyprint
{
  background-color: #ffd;
  border-radius: 8px;
  box-shadow: 4px 4px 12px #a2573b;
  padding: 0 .5em
}

However, if we navigate to another page and select the back-button to return to this location in the page, the code will be toggled to its closed position. This is not a very pleasing effect, so I will only use it on rare occasions.

HTML Code Sample

This is the HTML markup used to create these Code Boxes. The following HTML tags will toggle on and off, <h5><h6><pre><p><ul><li><ol> but this could be extended if required.

<!-- HTML -->
<div class="code-box">
  <h4 class="code-button" title="Code">/* Your Title here */</h4>
  <pre class="prettyprint"><code>
    /* Your display code here */
  </code></pre>
</div><!--.code-box-->

Executable JavaScript

Markup

This is the markup for executable JavaScript.

<!-- HTML -->
<pre class="prettyprint" title="js"><code>/* Executable JavaScript */
/* Your executable code here */
</code></pre>

Here is an example of some JavaScript. In this case, it has been enhanced so that when you select the code it will execute.

/* JavaScript (Click this code to run it) */
alert('WW.Teach is required for tutorial pages and other code examples');

The example above will execute the code every time it is selected (Try it). If it is required to execute the code only once, change the title attribute from js to js-one. Notice that the little execution icon execution icon disappears once it is run.

/* JavaScript */
alert('This will only execute only once!');

External Code

To display external code, you could copy the code and insert it into one of the HTML fragments used above. However, it would be much more efficient to run some code that:

  • Remotely accesses the external file.
  • Loads it into a section.
  • Waits a fraction.
  • Beautifies the code using PrettyPrint's syntax highlighting.
  • Allows you to expand the code by selecting the plus symbol in the top right-hand corner.
  1. Select the button below.
  2. execute the code (Click the code).
  3. expand the code box (Click the symbol.
  4. view the code.
  5. collapse the code box when done (Click the symbol.
  6. hide everything by selecting the button again.

WordPress Theme File (index.php)

WW.Teach.displayFile( '/blog/wp-content/themes/clanwallace/index.php', 'index_php'); 
prettyPrint();

// Run code above to display the external file here

Internal Code

In-Page JavaScript

To display internal JavaScript code, once again, you could copy the code and insert it into one of the HTML fragments used above. However, why not access the code directly from the script block in this page, <script id="target2"> and display it.

WW.Teach.displayInline('scripts','target2');
// Run code to display in-line scripts

In-Page CSS

To display internal CSS code, access the code directly from the style block in this page, <style id="styles"> and display it.

WW.Teach.displayInline('styles','target');
// Run code to display in-line styles

I have a class="example" and have been styled

.