livebook/assets/css/markdown.css

/* Markdown rendered content */

.markdown {
  @apply text-gray-700;
}

.markdown h1 {
  @apply text-gray-800 font-semibold text-3xl mt-8 mb-4;
}

.markdown h2 {
  @apply text-gray-800 font-semibold text-2xl mt-8 mb-4;
}

.markdown h3 {
  @apply text-gray-800 font-semibold text-xl mt-8 mb-4;
}

.markdown h4 {
  @apply text-gray-800 font-semibold text-lg mt-8 mb-4;
}

.markdown h5 {
  @apply text-gray-800 font-semibold text-base mt-8 mb-4;
}

.markdown h6 {
  @apply text-gray-800 font-semibold text-base mt-8 mb-4;
}

.markdown p {
  @apply my-4;
}

.markdown ul {
  @apply list-disc list-outside my-5 ml-8;
}

.markdown ol {
  @apply list-decimal list-outside my-5 ml-8;
}

.markdown ul ul {
  list-style-type: circle;
}

.markdown ul ul ul {
  list-style-type: square;
}

.markdown .task-list-item {
  list-style-type: none;
}

.markdown .task-list-item input[type="checkbox"] {
  margin-left: -1.1rem;
  vertical-align: middle;
}

.markdown ul > li,
.markdown ol > li {
  @apply my-1;
}

.markdown blockquote {
  @apply border-l-4 border-gray-200 pl-4 py-2 my-4 text-gray-500;
}

.markdown a {
  @apply font-medium underline text-gray-900 hover:no-underline;
}

.markdown img {
  @apply mx-auto my-4;
}

.markdown table {
  @apply w-full my-4 shadow-xl-center rounded-lg tiny-scrollbar;
}

.markdown table thead {
  @apply text-left;
}

.markdown table thead tr {
  @apply border-b border-gray-200;
}

.markdown table tbody tr {
  @apply border-b border-gray-200 last:border-b-0 hover:bg-gray-50;
}

.markdown table th {
  @apply py-3 px-6 text-gray-700 font-semibold;
}

.markdown table td {
  @apply py-3 px-6 text-gray-500;
}

.markdown table th[align="center"],
.markdown table td[align="center"] {
  @apply text-center;
}

.markdown table th[align="right"],
.markdown table td[align="right"] {
  @apply text-right;
}

.markdown code {
  @apply py-[0.1rem] px-2 rounded-lg text-sm align-middle font-mono bg-gray-200;
}

.markdown pre {
  @apply flex overflow-hidden;
}

.markdown pre > code {
  @apply p-4 rounded-lg text-sm align-middle font-mono flex-1 overflow-auto;
  /* Match the editor colors */
  background-color: #282c34;
  color: #abb2bf;
}

.markdown kbd {
  @apply py-[0.2rem] px-2 rounded-lg text-xs align-middle font-mono border border-gray-300;
  box-shadow: #cad5e0 0px -2px 0px 0px inset;
}

.markdown > :first-child {
  @apply mt-0;
}

.markdown > :last-child {
  @apply mb-0;
}

.markdown .katex-display {
  @apply my-8;
}

/* Overrides for user-entered markdown */

[data-element="cell"][data-type="markdown"] .markdown h1,
[data-element="cell"][data-type="markdown"] .markdown h2 {
  font-size: 0;
}

[data-element="cell"][data-type="markdown"] .markdown h1:after,
[data-element="cell"][data-type="markdown"] .markdown h2:after {
  @apply text-red-400 text-base font-medium;
  content: "warning: heading levels 1 and 2 are reserved for notebook and section names, please use heading 3 and above.";
}