Markdown Overview - Blogging with Jekyll

A quick, basic primer on Markdown and blogging in Jekyll.

• 472 words

• By Scott Mathson

This article is intended to give you a very basic rundown of some key concepts of Markdown, as well as provide insight into using Markdown/start blogging within the Jekyll website theme I developed: Simpol Theme.

Markdown is a simple, plain text formatting language. Out of the box, Jekyll - a static website generator - supports and converts Markdown into HTML.

The best way to understand Markdown? Check out a file written in it, I know you’ll catch on quickly.

Markdown examples:

H1

H2

H3

H4

H5

Here’s how those headings, above, very simply came to be.

# H1
## H2
### H3
#### H4
##### H5

What about that ^ horizontal rule? Simple, just add 3 or more hyphens, astericks, or underscores!

---
___

***

Are you seeing this bolded and italicized text, throughout?

Yeah, Markdown.

And yes, easy.

To bold some text, either add two __underscores__ or **asterisks** around the content.

Similarly, to italicize text, add a single group of _underscores_ or *asterisks* around the content.

Here’s how it renders:

To bold some text, either add two underscores or asterisks around the content.

Similarly, to italicize text, add a single group of underscores or asterisks around the content.


Here’s how I’m adding the code/syntax highlighting throughout this post, in Markdown.

"```"
For code blocks, add 3 back-ticks around the block, like so (eliminating the quotation marks, ending up solely with 3 back-ticks ```). Look familiar, Slack users?
"```"
For general syntax highlighting and code blocks, add 3 back-ticks around the block, without specifying a particular language.

<div class="example">
	<p>Hello world...</p>
</div>

I’ve developed Simpol Theme to be intentionally light-weight, no syntax highlighting add-ons are included in the current version.

For inline code, simply add a single group of back-ticks `around the code`.

For inline code, simply add a single group of back-ticks around the code.


Need to add links inline or throughout your post? Here’s how!

[Simpol Theme repo - inline link](https://github.com/scottmathson/simpol-theme)

[Simpol Theme repo - inline link with title tag](https://github.com/scottmathson/simpol-theme "Simpol Theme repo")

Simply paste a link within angle brackets: <https://github.com/scottmathson/simpol-theme>

Simpol Theme repo - inline link

Simpol Theme repo - inline link with title tag

Simply paste a link within angle brackets: https://github.com/scottmathson/simpol-theme


Again, this look at Markdown is intended to give you a very basic rundown of some key concepts of Markdown, alongside providing support for Simpol Theme users.

Other resources

For further markdown reading, I highly recommend you check out one of the greatest reference guides/resources that I’ve found, to-date: markdown cheatsheet.

chevronLeft icon Previous Next chevronRight icon