---
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.`<br/>`<br/>

<p class="text-subtitle text-sm mb-2">today i learned that • in Monofur is actually rendered as `•`. cute.</p>

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 `<br/>` for HTML: *any HTML elements can be inserted into your Markdown document,* and it will be passed
through just fine.

```html
<div class="border-red-500 border-2 rounded-xl border-dashed p-4 mb-2">
    <p class="mb-0 text-green-700 dark:text-green-400">hiiiii</p>
</div>
```

<div class="border-red-500 border-2 rounded-xl border-dashed p-4 mb-2">
    <p class="mb-0 text-green-700 dark:text-green-400">hiiiii</p>
</div>

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 &mdash; 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
    }
    //...
}
```

<p class="text-subtitle text-sm mb-2">looks like I need to add styling for CSS code lmao</p>

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