Markdown Styling

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa

Start numbering with offset:

  1. foo
  2. bar

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


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" />
Beagle Dog by Jules D. on UnsplashBeagle Dog by Jules D. on Unsplash

Strikethrough

one or two tildes.

Table

First HeaderSecond Header
Content Cell 1Content Cell 1
Content Cell 2Content Cell 2
Content Cell 3Content Cell 3
Content Cell 4Content Cell 4

Tasklist

It might affect your Lighthouse score!

  • to do
  • done