Table of Contents

<--   Back

Hello World and Markdown Test

Hello world.

Heading 2

Heading 3

Heading 4

Heading 5

Components

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. N ullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

Aenean ornare neque sed facilisis lobortis. Sed posuere mattis condimentum. Vestibulum condimentum velit metus, sed pulvinar neque dictum quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Donec convallis volutpat ipsum, eu placerat magna vestibulum sed. M aecenas gravida nibh quam, id ornare orci auctor eget. Etiam posuere ante ac nisl porta convallis. Proin viverra, metus sed auctor vestibulum, tellus ipsum gravida velit, vel consectetur augue ligula nec sapien. Morbi tristique dignissim tempus.

Emphasis

Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornareac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

Italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

List

Ordered

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
  5. Lorem ipsum dolor sit amet.

Unordered

Nested

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

Image

Random image

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

  • Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

Code

Code highlighting using https://github.com/atomiks/rehype-pretty-code.

Inline

Default

Wrap text inside backtick like `function(num: number){ return (num & 0x1) === 0 }` will render function(num: number){ return (num & 0x1) === 0 }.

Highlighting

Set language using `...{:lang}` at the end will highlight the output, something like this function(num: number){ return (num & 0x1) === 0 }.

Block

Default

No language after ```.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elementum ipsum nibh, ac bibendum turpis consectetur eu. Ut cursus dapibus ante, eget dignissim libero tristique vel. Suspendisse potenti. Phasellus a dui eget nulla varius dapibus. Mauris et convallis quam. Sed convallis sodales est. Cras et accumsan justo. Morbi venenatis accumsan sem, ac imperdiet felis vestibulum non. Maecenas volutpat sapien metus.

Highlighting

Set language after ```, like ```python.

def magnitude(a: Vec2D) -> float:
  """
    Get vector magnitude.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elementum ipsum nibh, ac bibendum turpis consectetur eu. Ut cursus dapibus ante, eget dignissim libero tristique vel. Suspendisse potenti. Phasellus a dui eget nulla varius dapibus. Mauris et convallis quam. Sed convallis sodales est. Cras et accumsan justo. Morbi venenatis accumsan sem, ac imperdiet felis vestibulum non. Maecenas volutpat sapien metus.
  """
  return math.sqrt(pow(a.x, 2) + pow(a.y, 2)) # inline comment

Title and Line Numbers

title="something" to add title and showLineNumbers to add line numbers, set number start with showLineNumbers{n}.

even.rs
fn even(num: i32) -> bool {
  return (num & 0x1) == 0;
}

Word and Line Highlighting

/word/ to highlight words and {n,n-n} to highlight lines.

class FizzBuzz {
  public static void main(String[] args) {
    for (int i = 1; i <= 100; i++) {
      String r = "";
      Boolean fizz = i % 3 == 0;
      Boolean buzz = i % 5 == 0;
      if(fizz){
        r += "fizz";
      }
      if(buzz){
        r += "buzz";
      }
      System.out.println((r == "") ? i : r);
    }
  }
}

GitHub Markdown

GitHub flavour markdown support by default in @astro/mdx.

https://wikipedia.org, Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.

Strikethrough

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dolor at neque tincidunt mattis. Mauris ex libero, elementum a tempor vitae, ornare ac elit. Nullam nulla tortor, iaculis sit amet sagittis in, cursus sit amet nunc.

Tasks

Footnotes

Here is a simple footnote1. With some additional text after it.

Here is a simple footnote2. With some additional text after it.

Here is a simple footnote3. With some additional text after it.

Table

Header 1Header 2Header 3
TextTextText
TextTextText
TextTextText
TextTextText

KaTeX Math

Dot product a\bold{a} and b\bold{b}.

a⋅b=∑i=1naibi=a1b1+a2b2+⋅⋅⋅+anbn\bold{a}\cdot\bold{b} = \displaystyle\sum_{i=1}^n a_i b_i = a_1 b_1 + a_2 b_2 + \cdot\cdot\cdot + a_n b_n

Rotate 2D vector.

Rv=[cos⁡θ−sin⁡θsin⁡θcos⁡θ][xy]=[xcos⁡θ−ysin⁡θxsin⁡θ+ycos⁡θ]\begin{aligned} R\bold{v} & = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} \\ & = \begin{bmatrix} x \cos \theta - y \sin \theta \\ x \sin \theta + y \cos \theta \end{bmatrix} \end{aligned}

Derivative.

dfdx=lim⁡Δx→0f(x+Δx)−f(x)Δx=lim⁡h→0f(x+h)−f(x)h=lim⁡Δx→0ΔyΔx\begin{aligned} \frac{df}{dx} & = \lim_{\Delta x \to 0}\frac{f(x+\Delta x)-f(x)}{\Delta x} \\ & = \lim_{h\to 0}\frac{f(x+h)-f(x)}{h} \\ & = \lim_{\Delta x \to 0}\frac{\Delta y}{\Delta x} \end{aligned}

Diagrams

Pie

SkySunny side of pyramidShady side of pyramidSkySkySunny side of pyramidSunny side of pyramidShady side of pyramidShady side of pyramid

Graphviz

FLow cluster_rehype Rehype cluster_remark Remark mdast mdast hast hast mdast->hast mdast-util-to-hast HTML HTML hast->HTML hast-util-to-html Markdown Markdown Markdown->mdast mdast-util-from-markdown

Plot Function

−10123456210−1−2

Pintora

UserPintorarender this1Has input changed?2loop[Check input]your figure here3note overnote aside actormultiline noteis possibleDividerUserPintoraSequence Diagram Example
Initread configinit internal servicesDiagram requesteddiagram registered ?get implementationprint error renderer type Generate svgDraw canvasCustom renderer outputdata available?read datagenerate diagramsinit themesyesnosvgcanvascustomavailablenoActivity Example

Footnotes

  1. My reference.
    breakline and other content. ↩

  2. My reference. ↩

  3. My reference. ↩

Open GitHub Discussions