Skip to content

Instantly share code, notes, and snippets.

@akirap3
Last active May 21, 2020 19:11
Show Gist options
  • Save akirap3/9908d0a0bf0cace4817172ceed2d436f to your computer and use it in GitHub Desktop.
Save akirap3/9908d0a0bf0cace4817172ceed2d436f to your computer and use it in GitHub Desktop.

The reseasons why I want to learn Markdown syntax :


Reason

1. I can edit whole contents in words and codes. No images are copied in a markdown file, they are indirectly linked to URLs of the source images. It's a clear pattern.
2. If you are often using Github, you may notice that the editing method of readme.md is Markdown syntax.
3. As an engineer, I would like to indulge in the coding environment as possible, even when I compose an article. Markdown is a way to achieve that.
4. I think it's not to difficult to get this skill if you have some background in coding. Grasp some keynote syntaxes and the most used ones. Hence, you may find it's not scaring for you.

First of all, the idea of writing a blog comes up to me, I consider which platform should I chose, how I write articles efficiently and can be put on several blog website. In the end, I pick blogger and Medium, the blogger is the place where I compose an article initially, and I will put the same contents in Medium via importing markdown file edited on online Markdown editor.

Let's get started.

To be honest, I didn't try every online editor on the Internet. I just select the one I think it is neat for me. I use the opensource project on Github. The author is pandao, and the project name is editor.me.

You can visit this project on this web page editor.md

Nicely, there are most used Markdown syntaxes display on the left side. Furthermore, the top navigation has widgets to help you edit markdown file quickly if you are not familiar with the syntax.

Font styles and size

The sizes of fonts

  • Syntax : #

  • use # to adjust the size of fonts, the more the number of # get, the smaller the size is.

Strikethrough

  • Sytanx: <s>text</s> or ~~text~~ text

Italic

  • Syntax: *text* or _text_ text

Emphasis

  • Syntax: **Text** or __Text__ Text

Superscript

  • Syntax : <sup>text</sup>
  • eg. O<sup>2</sup> O2

Subscript

  • Syntax: <sub>text</sub> text
  • eg. X2

Lists styles

Table of Contents

  • It will organize a table menu that you harness "#" in your article hierarchically.
  • Syntax :
   [TOCM] <= this mean table of contents menu
   [TOC] <= table of contents

Unordered list

  • Syntax : - or * or +
  • eg.
    - list 1
    * list 2
    + list 3
- list 1
* list 2
+ list 3

Unordered list (plus sign and nested)

  • eg. + Item A + Item B + Item B 1 + Item B 2 + Item B 3
  • Item A
  • Item B
    • Item B 1
    • Item B 2
    • Item B 3

Task list

  • eg. - [x] task list 1 - [ ] task list 1-1

  • task list 1

    • task list 1-1

Link URLs and Images

Link URLs

  • It's very similar to the syntax of link images. The difference is the question mark.
  • Syntax : [the word you'd like to show](url)
  • eg.[Heading link](https://github.com/pandao/editor.md "Heading link") Heading link

Link images

  • Syntax : ![](url)
  • eg. ![](https://cdn.icon-icons.com/icons2/2230/PNG/128/grandma_black_transparent_icon_134572.png)

Line styles

Underline

  • Syntax : ============= or -------------

Horizontal line

  • Syntax: ---

About codes

inline code

  • Syntax: tow ` compass codes
  • eg. $ pip install flask

Code Blocks (Preformatted text)

  • Syntax: indented four spaces or

    ```
    
    code
    
    ```
    
  • eg.

    <?php
        echo "Hello world!";
    ?>
    
    

Specific languages

  • Syntax : language name
  • eg. javascript function test(){ console.log("Hello world!"); }

Abbreviation (link HTML abbr tag)

  • Syntax: text
  • eg. The HTML

Blockquotes

  • Syntax: > text
  • Note: must have one line above and below for each

Table

  • eg. Note: ":" mean the aligned direction

(1) Table 1

First column  | Second column

------------- | -------------

Content Cell  | Content Cell

Content Cell  | Content Cell 

(2) Table 2

| First column| Second column|

| ------------- | ------------- |

| Content Cell  | Content Cell  |

| Content Cell  | Content Cell  |

(3) Table 3

| Item      | Value |

| --------- | -----:|

| Computer  | $1600 |

| Phone     |   $12 |

| Pipe      |    $1 |

(4) Table 4

| Left-Aligned  | Center Aligned  | Right Aligned |

| :------------ |:---------------:| -----:|

| col 3 is      | some wordy text | $1600 |

| col 2 is      | centered        |   $12 |

| zebra stripes | are neat        |    $1 |

The above are the most used in Markdown when you edit it, you can take editor.md or Github for references.

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