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 |