Skip to content

Instantly share code, notes, and snippets.

@vinesmsuic
Last active January 1, 2021 13:48
Show Gist options
  • Save vinesmsuic/18bb109a3585631724bef2b35f0a0a4e to your computer and use it in GitHub Desktop.
Save vinesmsuic/18bb109a3585631724bef2b35f0a0a4e to your computer and use it in GitHub Desktop.
This Gist is written for the Juniors who need to submit their task.

Too Long, Didn't read: GitHub Flavored Markdown Spec

If you can read chinese, read this first then my file Markdown 是什么?

I suggest you to read the Raw file first then see this rendered page.

What is markdown?

Markdown is a lightweight markup language with plain text formatting syntax. Its design allows it to be converted to many output formats, but the original tool by the same name only supports HTML.

You might consider it is something better than MS Word. In github repository, readme.md is a .md file, which md stands for Markdown.

Why markdown?

  • Support Everywhere
  • Easy to learn
  • Quick and clean
  • Easy On The Eyes
  • Sytlish code showcase

What application should I use for writing markdown?

I personally recommend Typora (Support Linux, Windows, MacOS

Visual Studio code

Some basic syntax of markdown

Look At Here

Something Essentials

Headers

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

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

Links

[I'm an inline-style link](https://www.google.com)

List

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

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

* Unordered list can use asterisks
- Or minuses
+ Or pluses
  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.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

  • Unordered list can use asterisks
  • Or minuses
  • Or pluses

Images / Gifs

![alt text](https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)

Code Expression

Inline Code

  ```javascript
  var s = "JavaScript syntax highlighting";
  alert(s);
  ```
  
  ```python
  s = "Python syntax highlighting"
  print s
  ```
  
  ```
  No language indicated, so no syntax highlighting. 
  But let's throw in a <b>tag</b>.
  ```

Mathematical expression

In markdown, we use Latex if you want to put some fancy Mathematical expression.

Note that

  • Both Typora and VSCode support Latex syntax.
  • Github Flavored Markdown doesn't support Latex syntax.

But We still welcome you guys to use it when needed.

Syntax Guide

Useful Latex Generator

Tips and Tricks using markdown

Linking image from your google drive

![](https://drive.google.com/uc?export=view&id=XXX)

Notice here 'XXX' is the ID of the image.

You'll need to grab the ID of the image. Easiest way on the desktop is to right click the file, dive into the Google Drive subcontext menu and choose View on the Web. Grab the string of characters from there and replace the XXX in the code below with it.

Linking image from imgur

I strongly recommand uploading the photos on imgur then link it back.

Imgur

Upload the image to Imgur then link it back.

Realtime Preview is very important

Again, I recommend Typora (Support Linux, Windows, MacOS

Practice your markdown skills online

Dillinger, The Online Markdown Editor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment