Code samples

Code Samples

Use fenced code blocks with the language specified, like this:

```js
console.log('hello');
````

Result:

console.log('hello');

For the list of supported languages you can use (similar to js for JavaScript), see Supported languages.

Code caption

Sometimes you want a caption on a code sample, for example to show the file name that contains the code. For example:

{% include code-caption.html content="/common/models/user.json" %}

```javascript
...
// Some code
...
```

Results in the following:

...
// Some code
...

Syntax highlighting

For syntax highlighting, use fenced code blocks optionally followed by the language syntax you want:

```ruby
    def foo
      puts 'foo'
    end
```

This looks as follows:

    def foo
      puts 'foo'
    end

Fenced code blocks require a blank line before and after.

If you’re using an HTML file, you can also use the highlight command with Liquid markup:

{% highlight ruby %}
    def foo
      puts 'foo'
    end
{% endhighlight %}

It renders the same:

    def foo
      puts 'foo'
    end

The theme has syntax highlighting specified in the configuration file as follows:

highlighter: rouge

The syntax highlighting is done via the css/syntax.css file.

Available lexers

The keywords you must add to specify the highlighting (in the previous example, ruby) are called “lexers.” You can search for “lexers.” Here are some common ones I use:

• js
• html
• yaml
• css
• json
• php
• java
• cpp
• dotnet
• xml
• http