--- layout: '../../layouts/StandaloneMDXLayout.astro' title: MDX Stylesheet date: 1970-01-01 summary: "A showcase of everything I can do with MDX + the addons I've installed." slug: mdxsheet draft: true --- Woah, how did you find this? You must be... a wizard or something. Or a witch. I like that idea better. You're a witch. # Base Markdown (CommonMark) OK, this should be fairly obvious. Regular text is by default grouped into paragraphs. Each paragraph is separated by a double line break. In other words, there needs to be a blank line inbetween each paragraph... ...like I just did! If you don't have a blank line inbetween line breaks, the line break will be ignored. This is great if you're writing in a code editor (like I am) where there is no autowrap: you can just break the line within the editor... whenever you need to... so you can keep all your text in view without having to scroll horizontaly. ```mdx you can just break the line within the editor... whenever you need to... so you can keep all your text in view without having to scroll horizontaly. ``` Technical note: if you break the line without a space inbetween the words, a space will be automatically added so you don't accidentally make a catdog word. If there *is* a space before the break, that space will be respected. If you *want* the line break to actually happen, there are multiple ways to do it. The first method is to add **two or more** spaces after the line you want to break.`°°` The second method is to add a backslash before the line break so the break is "escaped" and isn't cut out like it usually is.`\`\ Finally, you can just be silly and add an HTML break element.`
`

today i learned that • in Monofur is actually rendered as `•`. cute.

Honestly, if I were to micromanage the MDX parser, i would *disable* the two-space trick and force myself to make line breaks more visually obvious. I hate the two-space thing. With a passion.\ My favorite is probably the escape method followed by the HTML method. You aren't limited to just `
` for HTML: *any HTML elements can be inserted into your Markdown document,* and it will be passed through just fine. ```html

hiiiii

```

hiiiii

The classes here are [Tailwind](https://tailwindcss.com) classes so I can style individual elements however I want without having to write 50 billion lines of CSS. You may notice that I put `mb-2` for the `div` but `mb-0` for the `p`. What's up with that?\ `p` is a default element in Markdown — every paragraph I write in Markdown is wrapped with a `p` element. Thus, I added my own CSS styling to `p` to make everything look nice. That includes a `mb-2` by default. This styling happens *after* all the Markdown is parsed into HTML, which means the explicit `p` is *also* affected. So, to make sure there isn't extra white space within the HTML `div`, I reset the bottom margin of the `p` to `mb-0`. The CSS styling itself is done through a `markdown.css` file that automagically applies certain Tailwind classes to any elements inside an `article` tag, a.k.a. the entirety of the parsed Markdown. ```css article { //... p { @apply text-black dark:text-night-100 mb-2 } //... } ```

looks like I need to add styling for CSS code lmao

Fun fact: this `dark:` tag is basically how I style the entirety of the site for dark mode. It's also why, currently, dark mode is based on your system or browser's dark mode setting: it Just Works™ and I don't want to make it more complicated right now. --- Headers work like you would expect. # Header 1 ## Header 2 ### Header 3 #### Header 4 ##### Header 5 - oh, i didnt make styling for this one oops ###### Header 6 - not this one either. i'll get around to it eventually