As I was writing some tutorials recently I wanted to be able to style the html elements that Jekyll outputs with different css classes without having to write the actually html in the markdown.
For example I wanted to use a blockquote for items to be aware of that has a blue highlight as well as warnings to watch out for that has a red highlight. Here is the output of the blockquote with the different styles.
This is a normal blockquote. Without doing anything extra in markdown this is my default blockquote.
This is a warning blockquote.
With the kramdown markdown parser that Jekyll uses you can easily add these css classes without having to write out the html code.
In order to specify additional attributes to output in the html on the element, you start it with:
To specify a class it is
To specify a title attribute it is
Below are some specific examples.
With the blockquote you can also optional elements such as a title and id tag.
In the previous examples, we were adding classes to the whole element. However, there are times where you just want to highlight something within an element or sentence. For these times, you write the styling the same way as above but have to put it inline with the text.
With these new tricks you can make you markdown output look even better without having to resort to writing a lot of html within your markdown.