BUG: Lists aren't rendering properly.

This commit is contained in:
Hayden Hargreaves 2025-02-24 09:51:20 -07:00
parent 793e656efa
commit 0961df361c
3 changed files with 134 additions and 1 deletions

View File

@ -3,6 +3,71 @@
/* This is very painful. There must be a better way. */
@layer base {
div.blog-wrapper h1,
div.blog-wrapper h2,
div.blog-wrapper h3,
div.blog-wrapper h4,
div.blog-wrapper h5,
div.blog-wrapper h6,
div.blog-wrapper p,
div.blog-wrapper ul,
div.blog-wrapper ol {
@apply text-gray-300;
}
div.blog-wrapper ul {
list-style-type: disc !important;
@apply bg-red-500;
}
div.blog-wrapper.prose ul {
list-style-type: disc;
@apply bg-red-500;
}
div.blog-wrapper ul {
@apply list-decimal;
}
div.blog-wrapper h1 {
@apply text-4xl font-bold;
}
div.blog-wrapper h2 {
@apply text-3xl font-bold;
}
div.blog-wrapper h3 {
@apply text-2xl font-bold;
}
div.blog-wrapper h4 {
@apply text-xl font-bold;
}
div.blog-wrapper h5 {
@apply text-lg font-bold;
}
/* Same size as h5, but not bold */
div.blog-wrapper h6 {
@apply text-lg;
}
div.blog-wrapper p {
@apply text-sm;
}
div.blog-wrapper a {
@apply underline hover:text-blue-300;
}
div.blog-wrapper p code {
@apply bg-[#191724] p-1;
}
pre {
background-color: #191724;
padding: 0.5rem 2rem;

View File

@ -1,7 +1,70 @@
# This is a blog post
# H1 Tag
## H2 Tag
### H3 Tag
#### H4 Tag
##### H5 Tag
###### H6 Tag
*This text is italic*
**This text is bold**
***This text is bold and italic***
[This is an anchor](https://www.youtube.com), but this is not.
This is a blog post about something. It's really interesting. I hope you enjoy it.
# Markdown Quirks and Edge Cases
## Emphasis and Strong Emphasis
*This text is emphasized.*
_This text is also emphasized._
**This text is strong emphasis.**
__This text is also strong emphasis.__
* Item 1
* Item 2
* Item 3
+ Another Item 1
+ Another Item 2
1. Yet Another Item 1
2. Yet Another Item 2
***This text is both emphasized and strong!***
___This text is also both emphasized and strong!___
## Strikethrough
~~This text is strikethrough.~~
## Links
[Link to Google](https://www.google.com)
[Link with title](https://www.google.com "Google's Homepage")
[Relative link](/some/page)
[Link with spaces in URL](https://www.google.com/search?q=hello%20world)
<https://www.google.com> (Auto-linked URL)
## Images
![Alt text for image](https://www.example.com/image.jpg)
![Alt text with title](https://www.example.com/image.jpg "Image title")
![Image with spaces in URL](https://www.example.com/image%20with%20spaces.png) (URL encoded spaces)
## Code
`Inline code`
```javascript
// Code block with language specified
function myFunction() {
console.log("Hello, world!");
}
```
My favorite color is red.
```cpp

View File

@ -6,3 +6,8 @@
<div class="blog-wrapper prose">
{@html data.post.content}
</div>
<ul class="list-disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>