MSLabs Portfolio

Markdown Cheatsheet

By Lasx on Dec 4, 2022
Image post

Writing blog posts using Wordpress or any other alternative using a WYSIWYG editor is easy and fast but some other blogging platforms or Jamstack websites force you to use Markdown, and this method could be really faster and more efficient when you master the Markup language.
It’s similar to Vim vs Vscode, you could code twice faster on vim if you master the shortcuts.

Here’s the basics of Markdown style:

Headings

H1 For example

# H1 For Example

H2 For example

## H2 For Example

H3 For example

### H3 For Example

H4 For example

#### H4 For Example
H5 For example
##### H5 For Example
H6 For example
###### H6 For Example

Emphasis

Emphasis, aka italics, with asterisks (*asterisks*) or underscores (underscore).

Strong emphasis, aka bold, with asterisks (**) or underscores (__).

Strikethrough uses two tildes (~~). Scratch this.

Blockquotes

> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote. Use (>) character to start a blockquote.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break. (there is no > at the beginning of this line.)

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Horizontal separator

This is a horizontal separator:


Just insert --- (3 hyphens) in the beginning of the line


List types

Ordered list

To start a numbered list use numbers followed by a point then a space (1. ).

  1. List item 1
  2. List item 2
    1. Nested list item A
    2. Nested list item B
  3. List item 3

Unordered list

To start an unordered list just put a hyphen then a space (- ).

  • List item
  • List item
    • Nested list item
    • Nested list item
      • Double nested list item
      • Double nested list item
  • List item

Mixed list

  1. First ordered list item
  2. Another item
    • Unordered sub-list.
  3. Actual numbers don’t matter, just that it’s a number
    1. Ordered sub-list
  4. And another item.

[Inline-style link](https://www.google.com)

Inline-style link

[Inline-style link with title](https://www.google.com "Google's Homepage")

Inline-style link with title

[Reference-style link][arbitrary case-insensitive reference text]

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself].

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

Images

Images included in _posts folder are lazy loaded.

Inline-style: alt text

Table

And this is how to create tables in Markdown.

| Tables        | Are           | Cool |
| ------------- |:-------------:| ----:|
| col 3 is      | right-aligned | 1600 |
| col 2 is      | centered      | 12   |
| zebra stripes | are neat      | 1    |

| Markdown | Less      | Pretty     |
| -------- | --------- | ---------- |
| _Still_  | `renders` | **nicely** |
| 1        | 2         | 3          |

Result:

TablesAreCool
col 3 isright-aligned1600
col 2 iscentered12
zebra stripesare neat1
MarkdownLessPretty
Stillrendersnicely
123

Syntax highlight

To add a code block with a specific language highlighting, use “language_name" put your code then close with

var s = 'JavaScript syntax highlighting'; var s = 'JavaScript syntax highlighting';
alert(s);

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur vero esse non molestias eos excepturi, inventore atque cupiditate. Sed voluptatem quas omnis culpa, et odit.

s = "Python syntax highlighting"
print s
Subscribe to my Dev. Newsletter

I like to share my opinion about new dev technologies, I share some open source code too. If you're interested you can join me.

© Copyright 2024 by MSLabs. Built with ♥ by LasX.