blog.krasnikov.pro/styles/markdown.css

/* styles for remark-gfm plugin */

ul.contains-task-list {
  @apply list-none pl-0;
}

ul.contains-task-list li ul {
  @apply pl-4;
}

/* styles for rehype-autolink-headings plugin */

a[href^='#'] {
  @apply inline-block;
}

:is(h1, h2, h3) a > svg {
  @apply opacity-20;
}

html.dark :is(h1, h2, h3) a > svg {
  @apply opacity-40;
}

:is(h1, h2, h3):hover a > svg,
html.dark :is(h1, h2, h3):hover a > svg {
  @apply opacity-100;
}

h1 a > svg {
  @apply ml-2 h-6 w-6;
}

h2 a > svg {
  @apply ml-2 h-5 w-5;
}

h3 a > svg {
  @apply ml-1 h-4 w-4;
}

/* styles for rehype-pretty-code plugin */

pre {
  @apply !my-0 !p-0;
}

pre > code {
  @apply !overflow-x-auto !p-4;
}

code {
  font-weight: revert !important;
  @apply rounded !py-0 !px-1;
}

code::before,
code::after {
  @apply !content-none;
}

code[data-theme='dark'] {
  @apply hidden bg-slate-800;
}

html.dark code[data-theme='dark'] {
  @apply inline-block;
}

html.dark pre > code[data-theme='dark'] {
  @apply grid;
}

code[data-theme='light'] {
  @apply inline-block bg-white;
}

pre > code[data-theme='light'] {
  @apply grid;
}

html.dark code[data-theme='light'] {
  @apply hidden;
}

[data-rehype-pretty-code-title] {
  @apply mx-auto w-full max-w-3xl rounded-t-lg bg-slate-100 px-4 py-1 font-mono text-slate-600;
}

[data-rehype-pretty-code-title][data-theme='dark'] {
  @apply hidden;
}

html.dark [data-rehype-pretty-code-title][data-theme='dark'] {
  @apply block;
}

[data-rehype-pretty-code-title][data-theme='light'] {
  @apply block;
}

html.dark [data-rehype-pretty-code-title][data-theme='light'] {
  @apply hidden;
}

html.dark [data-rehype-pretty-code-title] {
  @apply bg-slate-900/70 text-slate-400;
}

[data-rehype-pretty-code-title] + pre,
[data-rehype-pretty-code-title] + pre > code {
  @apply !rounded-t-none;
}

code .word {
  @apply inline-block py-0 px-1;
}

code > .line.highlighted,
code .word {
  @apply bg-slate-100;
}

html.dark code > .line.highlighted,
html.dark code .word {
  @apply bg-slate-700;
}

code[data-line-numbers] {
  counter-reset: line;
}

code[data-line-numbers] > .line::before {
  counter-increment: line;
  content: counter(line);
  @apply mr-4 inline-block w-6 text-right text-slate-500;
}

code[data-line-numbers-max-digits='2'] > .line::before {
  @apply w-6;
}

code[data-line-numbers-max-digits='3'] > .line::before {
  @apply w-8;
}