Chalk uses the default Jekyll syntax highlighting gem Rouge. It has a customized style for both light and dark theme.
Use the highlight
tag to use the following code highlighting your preferred language:
<!-- This is a comment -->
<div class="grid">
<h1>This is a heading</h1>
<p>
This is a paragraph text.
</p>
</div>
Headings
Chalk includes 3 headings by default:
Heading first level
Heading second level
Heading third level
## Heading first level
### Heading second level
#### Heading third level
Lists
Unordered list example:
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Unordered list item 4
Ordered list example:
- Ordered list item 1
- Ordered list item 1
- Ordered list item 1
- Ordered list item 1
* Unordered list item 1
* Unordered list item 2
1. Order list item 1
2. Order list item 1
Emoji support
Emoji’s can be used everywhere in your markdown!
Quotes
A quote looks like this:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna.
Media
Images can be added with a default <img>
tag.
If you wish that an image can be enlarged on click use the image include tag. You can pass 3 variables:
-
path
: Image to show in the blog post. -
path-detail
: Image to show when enlarging. -
alt
: Alt text for image in blog post.
{% include image.html path="documentation/sample-image.jpg"
path-detail="documentation/[email protected]"
alt="Sample image" %}
Videos can be added and are responsive by default (4x3 by default, 16x9 with extra class).
<div class="embed-responsive embed-responsive-16by9">
<iframe src="url-to-video" allowfullscreen></iframe>
</div>