GFM + extended

The Github Flavoured Markdown MDX file, extended with HTML instrinsic elements and custom react components, for a fun interactive article 🎉.

Below is a demonstration of what GFM and the extensions can offer when authoring an article.

Interactive react components

Useful for creating toy examples for reader to interact with when explaining a problem.

Autolink ==literals==

There are all automatically detected URLs!

• www.example.com
• https://example.com
• contact@example.com

Images

Look, it's a picture, the KB site logo 😄

Comments and New lines

Between the parentheses there is a hidden markdown comment (). It is excluded in build time.

This is a line
this is another new line

Relative Link to another document

Check out my in-progress why write article

Footnote

A note¹

Strikethrough

one or two tildes.

Table

Tasklist

• to do
• done

Some Math

$\sqrt{a^2 + b^2}$

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.

$\sqrt{a^2 + b^2}$

Example code

Typescript code

const appConfig = {
  name: "Vite SSR Site App",
  desc: "A vite app that is prerendered and uses MDX",
  copyright: `Bhawick Jain 2022`,
};

Plain old Javascript with line number highlights

function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: "#foo" });
  }
}

The rust language

fn main() {
    println!("Hello, world!");

    another_function();
}

fn another_function() {
    println!("Another function.");
}

The GLSL language

#version version_number
in type in_variable_name;
in type in_variable_name;

out type out_variable_name;

uniform type uniform_name;

void main()
{
  // process input(s) and do some weird graphics stuff
  ...
  // output processed stuff to output variable
  out_variable_name = weird_stuff_we_processed;
}

The C Language

#include <stdio.h>

void increment(int a)
{
    a++;
}

int main(void)
{
    int i = 10;

    increment(i);

    printf("i == %d\n", i);  // What does this print?
}

Custom Components

You can create custom react component and use them as though they are HTML intrinsic elements. This is Neptune!

You can replace a HTML Element tag with your own react component!