[MDX]

MDX Formatting

Published By: EL Mehdi In August 12, 2022

Hello everyone, this snippet contain a bunch of formats that I use in the mdx for writing in my blog. MDX Formatting

Headings:

Thos are well known but it helps keeping them here, they are for headings

# Used for H1 Heading
## Used for H2 Heading
### Used for H3 Heading
#### Used for H4 Heading
##### Used for H5 Heading
###### Used for H6 Heading

Pictures:

To add a picture inside the post you can use the following syntax:


![picture alt text](picture-location.ext "picture title")

\

Lines:

To add a line you can use the following syntax:

after making a new line use \ to escape it and it get interpreted as a new line

\

text styles:

To add a text style you can use the following syntax:

For italic text use: *text*
For bold text use: **text**
for underlined text use: __text__
for strike through text use: ~~text~~
for bold italic text use: ***text***
for code text use: `text`

Example:

This is a text example that uses italic and bold text also Underlined and Strike through aswell as Bold Italic and code.

Scripts:

To add a script you can use the following syntax:

    ~~~js
    const script = 'this is for writing highligted code';
    console.log(script);
    \~~~
    ps. the \ was used to escape the ~ so the code dont get messed up

Example:

const script = 'this is for writing highligted code';
console.log(script);

Links:

links and emails doesn't require anything special you can just simply write them and they will get converted to a link

    www.example.com, https://example.com contain@example.com

Example:

www.example.com, https://example.com

Footnotes:

footnotes are used to add a note at the bottom of post to reference to something else

Example:

example1 and example2.

Tables:

tables are simple to use :

| A | B  |  C |  D  | <- this line is for heading
| - | :- | -: | :-: | <- this allow you to do content alignment
| 1 | pong | nano | minus | <- this is content

For no alignment use : -
For left alignment use : :-
For right alignment use : -:
For center alignment use : :-:

Example:

No AlignmentLeft AlignmentRight AlignmentCenter Alignment
1pongnanominus

Tasklists:

for making a tasklist you can use the following syntax:

* [ ] to do
* [x] done

Example:

  • to do
  • done

Quotes:

for making a quote you can use the following syntax:

> this is a quote
this line count for the quote aswell

You need an empty line like this ^ to end quote

Example:

this is a quote

This Footnotes at bottom was automatically generated from the footnoes example

Footnotes

  1. this is the footnote for example 1.

  2. and this is footnote for example 2.