Basic markdown

The website supports basic Markdown features and more!

The Thing can not be described—there is no language for such abysms of shrieking and immemorial lunacy, such eldritch contradictions of all matter, force, and cosmic order... The stars were right again, and what an age-old cult had failed to do by design, a band of innocent sailors had done by accident.

GitHub Flavored markdown

remark-gfm / https://github.github.com/gfm/

• Do something productive.
• Markdown setup with lots of cool features.
• Something that uses this cool markdown.

Code blocks

The website provides its own customized code blocks: with language icons (seti-ui), file names, line numbers, copy buttons, and absolutely spectacular syntax highlighting (shiki)! Looks just like VS Code, doesn't it?

~/source/repos/icons/link.svg

<svg viewBox="0 0 128 128" height="0.7em" width="0.7em"><path fill="none" stroke="currentColor" strokeWidth="10" strokeLinecap="round" d="M72,56 L72,56c11,11,11,29,0,40l-16,16c-11,11-29,11-40,0l0,0c-11-11-11-29,0-40 l14-14 M56,72 L56,72c-11-11-11-29,0-40l16-16c11-11,29-11,40,0l0,0c11,11,11,29,0,40 l-14,14"/></svg>

The copy button and line numbers can both be removed by specifying nocopy and nonums options. You can also choose to highlight certain lines with // highlight directives, or to turn them into "annotations" with // annotate.

/app/(main)/markdown/some-file.tsx

/* comment */
interface SomeProps extends React.HTMLAttributes<HTMLDivElement> {
  innerStyle?: React.CSSProperties;
}

export function renderSomething(data: string, props?: SomeProps) {
  const writeCount = 5 * 12.512e6, regex = /^a(b*)c|[xyz]+$/g;

  return (
    <>
      <label>{"Label:"}</label>
      <Component.Wrapper data={data} {...props} />
    </>
  );
}

type TypeA = string | Document | undefined;
const text: string | TypeA | false = null || ("bla-bla-bla" as TypeA);
const text: false | TypeA

KaTeX math

The markdown here uses remark-math and rehype-katex plugins to render math expressions with $\KaTeX$. They can be rendered inline: $\vec{v}=(m\vec{g} - \rho \vec{g}V) t$, or in block form:

Emojis

Regular emojis are converted into Twemoji emojis. They can also be inserted using GitHub's :emoji-name: syntax, and \-escaped if you want to make rendering platform-specific.

Inline CSS colors

CSS colors have a color box next to them: #ff0000, #00ff00, #0000ff.
Color functions work as well!: rgb(175, 23, 187) hsl(360 88% 36%/0.5).

Embeds

YouTube links on separate lines turn into embeds.

PrinceWhateverer - Burn Me Down [MLP MUSIC]

HYST3R1A!

The <iframe>s are loaded on click to prevent unwanted tracking by third parties.

Directives

The markdown also uses remark-directive to support generic directives.

Single player
Two players
Three players
Four players