Features – Code

Styling code snippets

Home Features – Code

You will find the styles below useful if you need to show snippets of code within your content. Adding just a few CSS classes you can make the code syntax coloured, show line numbers, etc.

Here is an example of inline code marked using the <code> tag.

Code block styled with Google Prettify

Created using the <pre class="prettyprint linenums pre-scrollable"> tag. 

<html>
  <head>
    <title>Fibonacci number</title>
    <style><!-- BODY { text-decoration: blink } --></style>
    <script src="foo.js"></script>
    <script src="bar.js"></script>
  </head>
  <body>
    <noscript>
      <dl>
        <dt>Fibonacci numbers</dt>
        <dd>1</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>5</dd>
        <dd>8</dd>
        &hellip;
      </dl>
    </noscript>

    <script type="text/javascript"><!--
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.writeln(fib(10));
// -->
    </script>
  </body>
</html>

Simple code block

Created using the <pre> tag. 

var sum = function() {
    var i, x = 0;
    for (i = 0; i < arguments.length; ++i) {
        x += arguments[i];
    }
    return x;
}
sum(1, 2, 3); // returns 6

Scrollable code block

Created using the <pre class="pre-scrollable"> tag. 

<html>
  <head>
    <title>Fibonacci number</title>
    <style><!-- BODY { text-decoration: blink } --></style>
    <script src="foo.js"></script>
    <script src="bar.js"></script>
  </head>
  <body>
    <noscript>
      <dl>
        <dt>Fibonacci numbers</dt>
        <dd>1</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>5</dd>
        <dd>8</dd>
        &hellip;
      </dl>
    </noscript>

    <script type="text/javascript"><!--
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.writeln(fib(10));
// -->
    </script>
  </body>
</html>

To learn more check the documentation.

Back to Top