This is a test blog post to see how markdown styling works. I'm going to try to make this as long as possible to see how the styling works.

This is styled using @tailwindcss/typography plugin. Markdown sample is from NekoChan's Blog.

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit 🤣, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id donec ultrices tincidunt arcu non sodales neque sodales. Adipiscing diam donec adipiscing tristique risus nec feugiat in.

Heading 1

Heading 2

Heading 3

Heading 4

Emphasis

Bold

Love is bold

Italic

A cat meow

Bold and Italic

This is really very important text.

Blockquotes

Blockquotes can also be nested...
...by using additional greater-than signs right next to each other...
...or with spaces between arrows.

Lists

Unordered

Create a list by starting a line with "-" sign
Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
  - Ac tristique libero volutpat at
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
Very easy!

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Start numbering with offset:

Code

Inline Code

This is an array [1, 2, 3] of numbers 1 through 3.

Code Block

<h1>Code Block</h1>

With code title:

src/components/Counter.jsx

import { createSignal } from 'solid-js'

export default function Counter() {
  const [count, setCount] = createSignal(0)

  const add = () => setCount((i) => i + 1)

  return (
    <div class='flex gap-x-4'>
      <button type='button' onClick={add}>
        the count is {count()}
      </button>
    </div>
  )
}

Horizontal Rules

Link

YouTube

Google

Adding Titles

YouTube

My Website

Image

Image compress and resize by @astrojs/image.

Currently, my custom component for images only supports 16:9 aspect ratio or else it will squish the image.

<BlogImage src={Dog} alt="Beagle Dog by Jules D. on Unsplash" />

<BlogImage src={Portrait} alt="Beagle Dog by Jules D. on Unsplash" />

Strikethrough

~one~ or ~~two~~ tildes.

Table

| First Header | Second Header | | -------------- | -------------- | | Content Cell 1 | Content Cell 1 | | Content Cell 2 | Content Cell 2 | | Content Cell 3 | Content Cell 3 | | Content Cell 4 | Content Cell 4 |

Tasklist

It might affect your Lighthouse score!

[ ] to do
[x] done

Markdown Styling