Documentation

Coding Elements

Luke Edwards Luke Edwards

Syntax highlighting preserves the context in which your readers will digest your code. Without it, your code will resemble plaintext... and no one likes looking at plaintext all day ;-).

We use Prism.js as our syntax highlighter because it's incredibly lightweight (ergo, fast) and easy to customize.

There are a few Prism themes included within Tiles. You may also find a bunch of additional choices on GitHub... or Google.

Inline

Sometimes you may want to type a small amount of code or reference a particular code-related property within your sentence.

For example, the background-color value of this page is #ffffff. Its variable is called $tile-bg-color and can be found within src/styles/components/tiles/_shared.sass.

With Caption

Captions are great for comments, declaring figure names, or providing general notes about the code block.

class Animal {
  constructor(name) {
    this.name = name;
  }

  move(meters) {
    alert(this.name + ' moved ' + meters + 'm!';
  }
}
Figure 1

This is a generic caption about a generic class in JavaScript!

CSS

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

@media screen and (max-width: 769px) {
    #container {
        width: 85%;
        margin: 0 auto;
    }
}

JavaScript

var menu = document.getElementById('menu');
var top = document.getElementById('top');

function moveNav() {
  if (window.innerWidth < 992) {
    body.appendChild(menu); // move to end
  } else if (menu.parentNode !== top) {
    top.insertBefore(menu, trigger);
  }
}

PHP

<?php

namespace Acme\Controllers;

use Acme\Manager;

class PagesController extends BaseController
{
    public function __construct(Manager $manager)
    {
        $this->manager = $manager;
    }

    public function index()
    {
        return $this->manager->contacts();
    }
}

HTML

<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <header role="banner">
        <!-- etc... -->
    </header>
</body>
</html>

Others

For additional language support, you must download them and/or replace the current Prism.js definitions found within src/scripts/_lib/prism.js.

You can browse available options here.