In this section you'll learn how to add syntax highlighting, examples, callouts and much more.

Note: This is the demo content for demonstration purpose only. The primary function of this content is to show you what this theme can do. There is a more detailed explanation in the Getting Started section.

Syntax highlighting

You can add a language identifier to enable syntax highlighting in your code block. For example, to highlight the JavaScript code, specify javascript next to the tick marks before the fenced code block:

```javascript
if (condition) {
  code to run if condition is true
} else {
  run some other code instead
}
```

The rendered output looks like this:

if (condition) { code to run if condition is true } else { run some other code instead }

Or to highlight the CSS code, specify css next to the tick marks before the fenced code block:

```css
body {
  background: #fff;
  color: #666;
  line-height: 1.66667; }

a {
  color: #d4a259;
  text-decoration: underline;
  -webkit-transition: background .3s ease, color .3s ease;
  transition: background .3s ease, color .3s ease; }

a:hover {
  color: #1d1d1d;
  text-decoration: none; }
```

The rendered output looks like this:

body { background: #fff; color: #666; line-height: 1.66667; } a { color: #d4a259; text-decoration: underline; -webkit-transition: background .3s ease, color .3s ease; transition: background .3s ease, color .3s ease; } a:hover { color: #1d1d1d; text-decoration: none; }

Callouts

There are two types of callouts available in this theme, important and note.

Important: This is an "Important" callout block of text. This block indicates a warning or caution. Use it for an important message.
Note: This is an "Note" callout block of text. This block signifies a general note or tip.

Tables

You can build tables with markdown to help you organize information. To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column like in the example below.

TitleTitle
TextText
TextText