Sample Post - Markdown Syntax

Posted:   December 12, 2018

Status:   Completed

Tags :   tag1 tag2 tag3

Categories :   sample post

Were equations, pictures or diagrams not properly rendered, please refresh the page. If the problem persists, you can contact me.

This page’s comment is disabled, scroll down to see.

Careful!

Don’t use [] in YAML front matter.

Use \newline instead of \\ in inline math.

\substack is a very useful command.

<img src="" width=80%> will be rendered by typora but Jekyll only renders <img src="" width="80%">

Display math must have extra black lines above and below like this.

some normal text

$$
E=mc^2
$$

Some more text

do not use {{ anywhere in your math. use { { instead. Jekyll will parse that as liquid tags

do not use x_1 in inline math, write that as x _ 1. Jekyll will parse that as italic.

Highlights

This is italic. This is Bold. * If asterisk is surrounded by spaces, it is not parsed. *

This is also italic. This is also Bold. _ If underscore is surrounded by spaces, it is not parsed. _

This is strike through.

There is no underline in markdown. You can use html tags like this to underline.

This is a code block.

This is an external link. “https://” is important. This is an internal link. Internal links are all lowercase with space replaced by hyphens “-“.

You can mix them like this, this, this, but not like [this](https://bit.ly).

Blocks

This is a quote block

This is a quote block in side another

 import numpy as np
 print("""This is a python code fence""")
 "This is a fortran code fence"
 implicit none
 This is a simple code fence. You can use it to display text. The fonts are mono spaced.

You can mix them as well, like

 This

Other Elements

This is horizontal line


Math Blocks

This is inline math $\sum_{i=1}^{N} i $. This is display math. \(\sum_{i=1}^{N} i\) The extra empty line matters, or you will end up with \(\sum_{i=1}^{N} i\) Mathjax syntax is like latex. You cannot use \usepackge, but you can use \newcommand like this \(\newcommand{\NewOp}[2]{\lbrace{#1}\mid \otimes{#2}\rbrace}\) And \NewOp will be available in all later math blocks, whether inline $\NewOp{x}{y}$ or display \(\NewOp{x}{y}\) Be very careful with the vertical bar symbol and underscore in math. If you use it like $|x|\ge 0$, $|0|=0$, or like $\lbrace x | x\gt 0\rbrace$, you will get a bunch of gibberish.

Use \vert in $\vert x\vert\ge 0$, $\vert 0\vert=0$. Use \mid in $\lbrace x \mid x\gt 0$ instead.

Also using underscores like this $x_1$, $x_2$, $x_{c_2}^{c_3}$, with $y_{c_2}^{c_3}$, will be processed as this.

Wrap underscores with whitespaces like this $x _ 1$, $x _ 2$, $x _ {c _ 2}^{c _ 3}$, with $y _ {c _ 2}^{c _ 3 }$.

Images

Markdown uses ![caption](link) to reference pictures, caption is optional. You cannot control the size.

caption

So I prefer using HTML tags like this:

Lists

  • This is unordered list
    • sub item
      • subsub item
        • subsubsub item
          • subsubsubsub …

  • List can have multiple lines

    like this.


  1. This ordered list
    1. sub item
  2. This is as well
  3. It can keep going

  1. You can avoid numbers like this
    1. sub item
  2. It keeps going
  3. Blah Blah

mermaid


sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?


graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D


graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A subgraph
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange


sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end

Tables

This column is left aligned This column is centered This column is right aligned
1 4 7
2 5 8
3 6 9
You can use ![caption](link) in tables. You can use Math in tables. You can use <img src="" width=""> in tables.
caption $1+1=2$

Foot Notes

This is a note1. Footnotes can have captions like2. You can reference to the same note multiple times like2. Foot notes can have many other options like3. Or just like 4. This is a reference style link to a page. And this is also a link. As is [this][] and [that].

Titles

This is h1

This is h2

This is h3

This is h4

This is h5
This is h6

Foot Notes

The Foot notes are like this

> Blockquotes can be in a footnote.
    as well as code blocks
  1. https://yk-liu.github.io 

  2. https://yk-liu.github.io  2

  3. or, naturally, simple paragraphs. 

Comments


😅 Commenting is disabled on this post.
You can use extended GitHub flavored markdown in your comment. Commenting FAQs & Guidelines