In this section you'll learn how to add syntax highlighting, examples, callouts and much more.
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.
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.
| Title | Title |
|---|---|
| Text | Text |
| Text | Text |