95 lines
No EOL
4 KiB
Text
95 lines
No EOL
4 KiB
Text
---
|
|
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 — 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 |