Skip to content

How to use Markdown

#markdown  

Cách sử dụng markdown trong obsidian khi viết blog bằng mkdocs.

1 Normal markdown - Obsidian

1.1 Basic syntax

  • This is working on task

  • This is complete task ✅ 2024-03-13

  • Using highlight highlight or highlight. For the long text

  • This is complete task ``complete

1.2 Callout table in Obsidian

Important information

Here is callout info

Nice tip

Here is the tip

1.3 Obsidian plugins

Có nhiều plugins được sử dụng để hỗ trợ viết trong Obsidian

2 Markdown in mkdocs

2.1 Admonition

Note

Here is the notes
Reading this is important

2.2 Button

  • ᐅ
  • OK
  • ᐁ
  • ᐃ
  • ᐅ

Obsidian markdown

Đơn vị:

$\pu{1.12 kg L^{-1} s^{-1}}$

\(\pu{1.12 kg L^{-1} s^{-1}}\)

Công thức hóa học: Nhờ vào extension của https://github.com/mhchem/MathJax-mhchem

$\ce{CO2 + C -> 2 CO}$

\(\ce{CO2 + C -> 2 CO}\)

Cách dùng như sau: https://mhchem.github.io/MathJax-mhchem/

\(\ce{CuBrMe2S}\)

3 Mermaid

3.1 Gantt

gantt
dateFormat YYYY-MM-DD

section Definition Phase
    Creative Brief : 2022-03-03, 1d
    Graphic Design Research : 2022-03-02, 2022-03-10
    Brainstorming / Mood Boarding : 2022-03-11, 2022-03-20

section Creation Phase
    Sketching : 2022-03-21, 2022-04-01
    Design Building : 2022-04-02, 2022-04-20
    Refining : 2022-04-21, 2022-04-30

section Feedback Phase
    Presenting : 2022-04-22, 2022-05-01
    Revisions : 2022-05-02, 2022-05-10

section Delivery Phase
    Final delivery : 2022-05-11, 2022-05-12
Press "Alt" / "Option" to enable Pan & Zoom
``` mermaid
classDiagram
  Person <|-- Student
  Person <|-- Professor
  Person : +String name
  Person : +String phoneNumber
  Person : +String emailAddress
  Person: +purchaseParkingPass()
  Address "1" <-- "0..1" Person:lives at
  class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
  }
  class Professor{
    +int salary
  }
  class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()  
  }

classDiagram
  Person <|-- Student
  Person <|-- Professor
  Person : +String name
  Person : +String phoneNumber
  Person : +String emailAddress
  Person: +purchaseParkingPass()
  Address "1" <-- "0..1" Person:lives at
  class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
  }
  class Professor{
    +int salary
  }
  class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()  
  }
Press "Alt" / "Option" to enable Pan & Zoom

3.2 Pie chart

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
Press "Alt" / "Option" to enable Pan & Zoom

3.3 Sequence

sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid

sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid
Press "Alt" / "Option" to enable Pan & Zoom

4 Diagram with plantuml

@startuml
participant dotcom
participant iframe
participant viewscreen

dotcom -> iframe: loads html w/ iframe url
iframe -> viewscreen: request template
viewscreen -> iframe: html & javascript
iframe -> dotcom: iframe ready
dotcom -> iframe: set mermaid data on iframe
iframe -> iframe: render mermaid
@enduml
dotcomiframeviewscreendotcomdotcomiframeiframeviewscreenviewscreenloads html w/ iframe urlrequest templatehtml & javascriptiframe readyset mermaid data on iframerender mermaid
dotcomiframeviewscreendotcomdotcomiframeiframeviewscreenviewscreenloads html w/ iframe urlrequest templatehtml & javascriptiframe readyset mermaid data on iframerender mermaid
@startuml
title Carbon Cycle in Water

package "Water" {
    [Dissolved Carbon Dioxide]
    [Bicarbonates]
    [Carbonates]
}

package "Atmosphere" {
    [Atmospheric Carbon Dioxide]
}

cloud "Photosynthesis\n(Plants & Phytoplankton)" as photosynthesis
cloud "Respiration\n(Animals & Bacteria)" as respiration
cloud "Decomposition" as decomposition

[Dissolved Carbon Dioxide] --> photosynthesis : absorbs
photosynthesis --> [Dissolved Carbon Dioxide] : releases
photosynthesis -up-> [Atmospheric Carbon Dioxide] : releases
[Atmospheric Carbon Dioxide] -down-> photosynthesis : absorbs
photosynthesis --> [Bicarbonates] : converts
[Bicarbonates] --> [Carbonates] : converts
[Carbonates] --> [Bicarbonates] : converts
[Bicarbonates] --> [Dissolved Carbon Dioxide] : converts

respiration --> [Dissolved Carbon Dioxide] : releases
[Dissolved Carbon Dioxide] --> respiration : absorbs

decomposition --> [Dissolved Carbon Dioxide] : releases
[Dissolved Carbon Dioxide] --> decomposition : absorbs

@enduml
Carbon Cycle in WaterCarbon Cycle in WaterWaterAtmosphereDissolved Carbon DioxideBicarbonatesCarbonatesAtmospheric Carbon DioxidePhotosynthesis(Plants & Phytoplankton)Respiration(Animals & Bacteria)Decompositionabsorbsreleasesreleasesabsorbsconvertsconvertsconvertsconvertsreleasesabsorbsreleasesabsorbs
Carbon Cycle in WaterCarbon Cycle in WaterWaterAtmosphereDissolved Carbon DioxideBicarbonatesCarbonatesAtmospheric Carbon DioxidePhotosynthesis(Plants & Phytoplankton)Respiration(Animals & Bacteria)Decompositionabsorbsreleasesreleasesabsorbsconvertsconvertsconvertsconvertsreleasesabsorbsreleasesabsorbs

5 Mkdocs Material website

Website này sử dụng Mkdocs Material theme nhưng đã tinh chỉnh lại rất nhiều. Bao gồm:

No other pages link to this page.

  1. Nguyen, An Truong, Julien Némery, Nicolas Gratiot, Thanh-Son Dao, Tam Thi Minh Le, Christine Baduel, and Josette Garnier. 2022. “Does Eutrophication Enhance Greenhouse Gas Emissions in Urbanized Tropical Estuaries?” Environmental Pollution 303: 119105. doi:10.1016/j.envpol.2022.119105. ↩


Created : Jul 24, 2023

Recent Posts

Tag cloud

Language  anki  Anki  Chinese  Money  crytocurrency  Esenthel  Game  Ecosystem  GameDev  Godot  Learning  programming  website  Art  Python  AGK  Raylib  Cpp  SDL  lua  solar2d  SFML  education  Thichnhathanh  Mental  Life  template  trader  tips  markdown  mobile  Mobile  mkdocs  git  Linux  Zotero  writing  research  python  Imputation  Machine-Learning  numerical  math  QGIS