Below are some cool things you can do with the MDX Editor!

Remember that you can copy paste an article written in Google Docs directly to the MDX editor!

IMPORTANT NOTES

  • You can save with CTRL + S!
  • You can copy from Google Docs into the editor.
  • You can copy HTML from another website into the editor.
  • Check out the official Github documentation on formatting Syntax! This provides a more comprehensive overview of formatting rules. The below are some more commonly used features.
  • Additional cheat sheet for GitHub Flavored Markdown here.

1) Various Header types:

  • Use the "#" symbol in front of a new line to turn the line into a header!
  • Headers also will be used to automatically generate a Table of Contents for your article.
  • Note: Avoid using Header 1 (single #). Since its formatting clashes with the article title, saving an article will automatically convert all Header 1 instances to Header 2.

Header 2

## Header 2

Header 3

### Header 3

Header 4

#### Header 4

2) Page Divider

  • Use three "---" dash lines to create a page divider (in HTML, this would be the <hr> element).

3) Colored Text

  • Wrap your colored text with the tags: <span className="TAILWINDCOLORNAME">Test</span>

  • A list of colors here: Tailwind text colors 

    <span className="text-blue-500">Test (text-blue-500)</span>
    Test (text-blue-500)

  • You can also use normal CSS styling if the style argument is passed in as an object, for finer control of font color (RGBA or Hex): 

    <span style={{color: "rgba(10,50,255,0.8)"}}>Test blue text</span>
    Test blue text 
    <span style={{color: "#FF0000AA"}}>Test red text</span>
    Test red text

4) Tables

  • Create tables the same way Markdown tables would be generated!
| Header | Column 2 |

| - | - |

| Row 1 | 011 |
HeaderColumn 2
Row 1011

5) Special Characters

  • Certain characters are reserved for HTML / JSX usage, and must be escaped in order to render properly (such as < Less Than).
  • Escape the characters by adding a \ in front, such as \<.
Special Characters
<
>
{

6) Images

  • Images can be uploaded by selecting the image option in the the toolbar above and uploading an image file of choice. In this case, the image is automatically centered and given its own row.

  • Inline image example!

  • For inline images, use <img src="https://i.nalu.wiki/SeBOpweIU0RuuBPPOS1br.png" className="inline-block TAILWINDHEIGHT TAILWINDWIDTH" />

  • You can also drag and drop an image to upload into the text editor area so long as cursor focus is in the text area (Note: Works on Google Chrome, may not work on other browsers).