Khinshan Khan

Hello there. This is where experiments sprout and blossom. Some even become features! Or they may become bugs that then become features. Or they... well yea, stuff happens.

Images

Tenor?

Stuffs

Saturday Vibes [(from Tenor)](https://tenor.com/view/fat-albert-saturday-gif-9828130470404483091)

Saturday Vibes (from Tenor)

Callouts

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

and this continues the paragraph.

This is another quote that is long enough to be on multiple lines. Let's see how it looks. And just to make sure it's long enough, I'll add some more text. Just a bit more.

but also without any variant

This is another quote that is long enough to be on multiple lines. Let's see how it looks. And just to make sure it's long enough, I'll add some more text. Just a bit more.

and now a quote with a caption:

The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what's true. We have a method, and that method helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly designed experiments are the key.

Carl Sagan, in "Wonder and Skepticism", from the Skeptical Inquirer Volume 19, Issue 1 (January-February 1995)

Formatting

Okay so now we try italics and bold and underline and something. Seems something corrects from ***something*** to **_something_**.

Spoilers

Don't you just hate ?

Also,

How about with... markup? .

TODO: absolutely failing --

...how about a formatting spoiler?

Lists

A short unordered list test (they may be wrong but think of it as lorem)

Coffee
Teas
- Black tea
  1. Assam
  2. Darjeeling
  3. Earl Grey
  4. Oolong Tea
    1. Tieguanyin
    2. Da Hong Pao
    3. Wuyi Rock Tea
- Green Tea
- Red Tea
  1. Rooibos
  2. Hong Cha
Milk
Testing a super long list item wrapping. This will be nonsense, as lorem ipsum tends to be. I love donut soufflé oat cake cake pastry marzipan I love. Cake bear claw bear claw marzipan gummies jujubes fruitcake. Cheesecake cookie marshmallow marshmallow macaroon tart pastry marshmallow.
Oj

And now an ordered list which fails to loop

Decimal
1. lower alpha
  1. lower greek
    1. Decimal
      1. lower alpha
        
        lower greek
        
        lower greek
      2. lower alpha?
    2. Decimal ?
  2. lower greek
2. lower alpha
Decimal

Codeblocks

Inline

This is inline as opposed to not. And this is absurdly long, should go over multiple lines yada yada stress testing.

GitHub

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

import React from "react"
import { PlusIcon } from "@radix-ui/react-icons"
import * as Tooltip from "@radix-ui/react-tooltip"

const TooltipDemo = () => {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button className="text-violet11 shadow-blackA4 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
            <PlusIcon />
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content
            className="data-[stat=delayed-open]:data-[sid=top]:animate-slideDownAndFade data-[stat=delayed-open]:data-[sid=right]:animate-slideLeftAndFade data-[stat=delayed-open]:data-[sid=left]:animate-slideRightAndFade data-[stat=delayed-open]:data-[sid=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
            sideOffset={5}
          >
            Add to library
            <Tooltip.Arrow className="fill-white" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

export default TooltipDemo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse risus ante, egestas quis sapien sed, condimentum tincidunt tellus. Aenean pretium scelerisque interdum. Nam vehicula laoreet lorem, eget iaculis nulla ultrices sit amet. Cras non nisi in lacus placerat varius. Nullam non semper nulla, consectetur ornare dolor. Cras feugiat, nibh quis auctor commodo, velit nulla egestas est, non mollis nisl nisl vitae dolor. Suspendisse sed dolor sit amet magna accumsan luctus sit amet at nisl. Pellentesque ex arcu, sagittis sed felis sit amet, porta iaculis turpis. Vivamus nunc nibh, fermentum eget cursus vitae, accumsan id justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ein

Donec auctor feugiat ligula at facilisis. Integer ligula risus, gravida eget euismod ultrices, dictum non nisl. Etiam aliquam lobortis mattis. Vivamus eu viverra justo, eget aliquet turpis. Aenean hendrerit est nec facilisis consectetur. Vestibulum eros augue, venenatis at placerat vel, euismod sit amet urna. Maecenas et scelerisque eros. Pellentesque odio magna, sodales vitae nibh vel, blandit rutrum tellus. Maecenas quis arcu blandit, aliquet ipsum a, cursus mi. Aenean viverra, libero id aliquet scelerisque, felis justo eleifend diam, ac tincidunt lectus ante eu nisl. Vivamus facilisis scelerisque ex dictum accumsan.

Donec pellentesque dui vulputate nibh fringilla varius et a enim. Nulla a lorem eget nunc tincidunt auctor ac a augue. Vivamus pretium velit non erat vestibulum ornare. Nulla imperdiet vel nisi non porttitor. Aenean tempor egestas nisl, sed convallis velit pretium rutrum. Suspendisse vitae mi ac diam faucibus blandit quis sed sapien. Donec ut convallis arcu. Nullam ante erat, porttitor in dolor ultrices, venenatis laoreet sem. Morbi dignissim, orci eu feugiat pulvinar, ligula lorem euismod sem, nec mollis dolor ligula finibus lacus. Cras vitae erat tincidunt, faucibus lacus ac, vehicula dui. Aliquam viverra in purus non mollis. Curabitur nec odio lacinia, efficitur risus dignissim, vestibulum felis. Suspendisse potenti. Nunc iaculis ligula sit amet nisl rutrum, eget ultrices risus euismod. In faucibus massa et facilisis feugiat.

Drei

Proin posuere neque rutrum tincidunt finibus. Sed volutpat nulla vitae turpis bibendum eleifend. Vestibulum posuere elementum turpis. Nunc interdum odio sit amet nunc varius, in cursus turpis gravida. Duis volutpat egestas orci, a sagittis purus accumsan eu. Sed at lorem vitae metus convallis varius vel nec leo. Ut ut vestibulum metus. Maecenas luctus, massa sit amet vulputate fringilla, massa nunc tristique purus, at suscipit libero diam a dolor. Cras congue tellus eu enim porta dignissim. In hac habitasse platea dictumst. Sed neque nulla, tempor non lacus convallis, fermentum venenatis est. Suspendisse nisl turpis, porta eu eros at, facilisis pellentesque risus. Nunc gravida, justo et rutrum cursus, neque ex efficitur risus, id suscipit odio est sed neque.

Sed nisl libero, interdum vel bibendum eu, tincidunt et tortor. Nullam quis tempor lectus, id accumsan enim. Proin iaculis condimentum vestibulum. Integer ac enim diam. Sed sagittis augue ut nibh rhoncus consectetur. Mauris suscipit libero quis nunc rutrum interdum. Pellentesque venenatis risus et risus viverra condimentum. Nulla molestie at sem in lobortis. In faucibus, mauris ut posuere dignissim, nisl erat fermentum ipsum, at feugiat leo nisl et ante. Integer in ante neque. Etiam tincidunt ex ut tellus bibendum, sed volutpat ligula pulvinar. Donec ultricies sed libero vitae malesuada. Proin viverra arcu vel dolor imperdiet viverra. Donec cursus cursus ipsum sed fermentum. Phasellus ullamcorper semper nisi quis tempor. Ut in velit tristique quam ullamcorper aliquam quis id ligula.

Zwei

Nunc a justo eget lacus laoreet tincidunt id eu leo. Mauris fringilla ultrices lectus, pharetra pulvinar lectus consectetur quis. Sed sagittis, ipsum et malesuada tincidunt, ligula leo molestie ipsum, eu commodo ante turpis ut quam. In ultricies turpis tellus, nec euismod urna varius accumsan. Sed finibus, nisl quis condimentum viverra, enim neque ornare quam, et accumsan velit tellus non nulla. Aliquam metus leo, tempus ac nibh vitae, auctor fringilla quam. Mauris venenatis dolor eget magna congue, sed suscipit tortor efficitur. Sed nec malesuada felis, nec pharetra orci. Sed a nisl sagittis, fermentum nisi eget, blandit nibh. In eu luctus felis, vitae congue odio. Morbi id facilisis orci, sed rhoncus nisi. Nullam eget diam quis risus pellentesque malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus quis erat imperdiet, porta tortor quis, feugiat neque.

Playground

Images

Tenor?

Callouts

Formatting

Spoilers

Links!

Lists

Codeblocks

Inline

GitHub

Radix Tooltip

Coup d'état

Ein

Drei

Zwei

One

Two

Three

Ein

TODO

Extended Formatting?

Table?