luong-komorebi/Markdown-Tutorial

Markdown Syntax

All Syntax can be found here . It would take a lot of effort to describe syntax in text (they will be formatted) so please consider this table below for the whole basics syntax.

Note: **Footnote** actually doesnt render properly in table, but it kinda looks like this

The same goes for block code/syntax hightlighting. It kinda looks like this picture :

.

These characteristics are dependent upon each markdown flavour.

Useful notes :

• Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax. One commonly used backslash escape character is : \
  So? \*This\* isnt italic anymore but is surrounded by literal asterisks.

• Youtube videos require some additional work.

They can't be added directly but you can add an image with a link to the video like this:
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

• Markdown does support Emojii :laughing: :laughing: :kissing_heart: :innocent: :green_heart: ( get some emojies here )

• You can use <br/> tag to force line break.

• Double space then enter if you want to make a new line if there is trouble making new lines.

• Seeing is not as good as practicing. You can either create a markdown file for yourself to practice or do it online here.

• Footnotes and syntax highlighting are not part of the original markdown and are only supported by certain flavors of markdown (Feedback from Sean Brody)

• Any URL (like http://www.github.com/) will be automatically converted into a clickable link.

• Markdown table support is designed to handle most tables for most people; it doesn’t cover all tables for all people. If you need complex tables you will need to create them by hand or with a tool specifically designed for your output format.

• Using image and links, you can create some colorful assets at render time. Badges like this are typical examples that you can find all over Github ( get some badges here )

• Using code block syntax with diff language to generate colored text. There are still some limitations such as can not style the text inside and few colors. This can be applicable when you want to highlight some note or to show difference between two code block

- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@

• Add beautiful note or warning section into markdown GitHub:

Note:

Warning:

• In markdown file on Github, with code block syntax and Mermaid language specifed, we can draw many kinds of diagram. More syntax and sample diagrams here

  • Class diagram

  classDiagram
      class Duck{
       -weight
        +swim()
        +quack()
      }
  

  • Sequence diagram

  sequenceDiagram
      participant dotcom
      participant iframe
      dotcom->>iframe: loads html w/ iframe url
  

  • Flowchart

    graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
  

Author: Vo Tran Thanh Luong. Also, I would like to thank all the contributors/translators for your work making this greater.

Footnotes

1. My footnote reference. ↩