DEV Community

Cover image for Markdown Essentials
Eoin Vaughan
Eoin Vaughan

Posted on

Markdown Essentials

#python

My first post was necessary, otherwise no half pretty posts haha. I would appreciate if anybody could recommend how they resize their images to follow the cover image dimensions.

Markdown Language

Overview

It is a lightweight markup language like HTML (No Tags) with a plain formatting syntax. The ease of use and readability are seen as its main advantages.

Markdown keeps positioning and uses special characters/punctuation marks to format stuff like bold, italics, lists etc.

Uses

  • It can be converted into HTML/XHTML
  • Use with README.md files (Github etc, Documentation on a Repo page)
  • Forums & Blogs (Pieces of content)
  • Static Site Generators (Gatsby that uses React framework)
Core Markdown
Headings Lists
Block of code Images
Emphasis Block-quotes
Links(Inline & Reference) Horizontal rules
Paragraphs Code & Syntax highlighting

Extras

  • Extensions allow for extra functionality with using markdown, like GitHub has extra extensions that allow for tables and task lists to be generated.
  • Text Editors have extensions that allow for you to preview the markdown file you have generated (VSCode (Auto-Open Markdown Preview), Atom, SublimeText etc.)

Basics

Italics

Single (Asterisks or Underscore)

_italics_
Enter fullscreen mode Exit fullscreen mode

italics

Emphasis

Double (Asterisks or Underscore)

**Bold**
Enter fullscreen mode Exit fullscreen mode

bold boy

Strikethrough

Double Tilda

~~Computer says NO!~~
Enter fullscreen mode Exit fullscreen mode

Computer says NO!

Horizontal rule (line)

Triple underscore, hyphens or underscores

---
Enter fullscreen mode Exit fullscreen mode

Add double tildas to get two Horizontal rules, aligned to the left, shortened also so may be used for sub section breakup. Good to know (My Mistake found it, sweet!)

____________________________________

Escape special characters,

Allows you to include them as normal in your document, see below how I used the \ escape character to include the HTML tag in the header section.

Headers

Like headers in HTML (# = </h1> tag)

#header one
## header two
### header three
#### header four
##### header five
###### header six
Enter fullscreen mode Exit fullscreen mode

header one

header two

header three

header four

header five
header six

links (Inline & Reference)

Inline Link

Square brackets & Curly parentheses
[Text for link](link itself, "Title"(Optional, for hovering over purposes(Doesn't seem to work here, if someone has a solution let me know))

[My GitHub](https://github.com/turbodaly152 "GitHub Profile")

[**My LinkedIn**](https://www.linkedin.com/in/eoin-vaughan-6a929aa5/ "Eoin Vaughan LinkedIn Profile")
Enter fullscreen mode Exit fullscreen mode

My GitHub

My LinkedIn

Reference Link

Place the reference at the bottom of the document(hidden), very useful if you want to use the same link a few times in a markdown doc.

Click here for [BC Parks][BCParks]

\[BCParks]: http://www.env.gov.bc.ca/bcparks/ (Will be hidden, only visible in source markdown code)
Enter fullscreen mode Exit fullscreen mode

Click here for BC Parks

Images(Inline & Reference)

Inline Image

Exclamation mark !

![Image of the price of Babybel here in Vancouver, Crazy](https://photos.google.com/photo/AF1QipNu6mpDnJNiMfNvAQGm5xHXuIRoxmcV3ucHvgr3)
Enter fullscreen mode Exit fullscreen mode

Image of the price of Babybel here in Vancouver, Crazy

Reference Image 

![Sea the stars][Best horse ever]
![Frankel][Second best horse ever]

\[Best horse ever]:https://tuesdayshorse.files.wordpress.com/2009/10/seathestars.jpg

\[Second best horse ever]: https://images.ctfassets.net/5v3ask2aw4ox/PA-2.11282730/ff78659756ed4b284288ef544f5a727d/2.11282730.jpg
Enter fullscreen mode Exit fullscreen mode

Sea the stars
Frankel

Block-quotes

Use of carat character > results in a highlighted background with a border to the left of the block-quote

>"To infinity and beyond" Buzz Lightyear
Enter fullscreen mode Exit fullscreen mode

"To infinity and beyond" Buzz Lightyear

Span multiple paragraphs, Block-quotes 

>Hello to you
>And goodbye
>to you
Enter fullscreen mode Exit fullscreen mode

Hello to you
And goodbye
to you

Lists (Ordered and Unordered)

Use asterisk (with space) for unordered lists
AND
\1. for ordered lists

* Chocolate fingers
* Chocolate buttons
* Chocolate digestives
Enter fullscreen mode Exit fullscreen mode
  • Chocolate fingers
  • Chocolate buttons
  • Chocolate digestives 
1. Chocolate fingers
1. Chocolate buttons
1. Chocolate digestives
Enter fullscreen mode Exit fullscreen mode
  1. Chocolate fingers
  2. Chocolate buttons
  3. Chocolate digestives

Can use indentation to have nested list items, must find out how to make indentation default to 1.1, 1,2, 1.1.2 etc.?

1. Chocolate fingers
 1. Chocolate buttons
1. Chocolate digestives
Enter fullscreen mode Exit fullscreen mode
  1. Chocolate fingers
    1. Chocolate buttons
  2. Chocolate digestives
  • Chocolate fingers
    • Chocolate buttons
  • Chocolate digestives

To include text within a bulletpoint you may include it underneath with 2 indentations



* Chocolate fingers

* Chocolate buttons
* Chocolate digestives
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

tomoyk profile image

Use imgp on macOS with Docker

Tomoyuki KOYAMA -

scofieldidehen profile image

Building an Interactive Mad Libs Game in Python: A Beginner's Guide

Scofield Idehen -

chesedwolfjager profile image

Writing your resume as a developer

Chesed Wolfjager -

lazy_code profile image

5 Best Python TUI Libraries for Building Text-Based User Interfaces

Nirob Ahmed -