@ant-design/x-markdown/es/XMarkdown/index.less

placeholder for @ant-design/x-markdown

// XMarkdown default styles
// Note: No theme colors included, only basic layout and typography styles
@keyframes x-markdown-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.x-markdown {
  --text-color: inherit;
  --font-size: inherit;
  --margin-block: 0 0 1em 0;
  --td-th-padding: 0.85em 1;
  --pre-th-td-padding: 2px 0;
  --border-font-weight: 600;
  --padding-ul-ol: 0 0 0 1em;
  --margin-ul-ol: 0 0 1em 1.8em;
  --margin-li: 0.25em 0;
  --margin-pre: 1em 0;
  --padding-code-inline: 0.2em 0.4em;
  --margin-code-inline: 0 0.2em;
  --code-inline-text: 0.85em;
  --small-border-radius: 2px;
  --image-margin: 0.5em 0;
  --hr-margin: 1.5em 0;
  --table-margin: 1em 0;

  // Base styles
  font-size: var(--font-size);
  line-height: 1.5714285714285714;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  color: var(--text-color);

  // Long content wrapping
  p,
  div,
  span,
  li,
  td,
  th {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  // Code block wrapping
  pre,
  code {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  // Table overflow handling
  table {
    word-break: break-word;
    overflow-wrap: break-word;
    table-layout: fixed;
    width: 100%;
  }

  th,
  td {
    padding: var(--td-th-padding);
  }

  th {
    font-weight: var(--border-font-weight);
  }

  pre,
  code {

    td,
    th {
      padding: var(--pre-th-td-padding);
      border: none;
      text-align: left;
    }
  }



  // Paragraph styles optimization
  p {
    margin: var(--margin-block);

    // First paragraph has no top margin
    &:first-child {
      margin-top: 0;
    }

    // Last paragraph has no bottom margin
    &:last-child {
      margin-bottom: 0;
    }
  }

  // List styles optimization
  ul,
  ol {
    margin: var(--margin-ul-ol);
    padding: var(--padding-ul-ol);

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  ol>li {
    list-style: decimal;
  }

  ul>li {
    list-style: disc;
  }

  li {
    margin: var(--margin-li);

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  // Code block styles
  pre {
    margin: var(--margin-pre);
    overflow-x: auto;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  // Inline code styles
  code {
    padding: var(--padding-code-inline);
    margin: var(--margin-code-inline);
    font-size: var(--code-inline-text);
    border-radius: var(--small-border-radius);
  }

  pre code {
    padding: 0;
    margin: 0;
    font-size: inherit;
    border-radius: 0;
    line-height: 2;
  }

  // Image styles
  img {
    max-width: 100%;
    height: auto;
    margin: var(--image-margin);
  }

  // Horizontal rule
  hr {
    margin: var(--hr-margin);
  }

  // Table styles
  table:not(pre, code) {
    margin: var(--table-margin);
    border-collapse: collapse;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.x-markdown .inline-katex {
  .katex-display {
    display: inline-block;
    margin: 0;
    text-align: initial;
    vertical-align: middle;

    >.katex {
      display: inline-block;
      text-align: initial;
      white-space: normal;

      >.katex-html {
        display: inline-block;
        position: static;

        >.tag {
          position: static;
        }
      }
    }
  }
}