Claude Code like github markdown

markdown.css

.markdown-body {
    --cc-text: #c4c4c4;
    /* regular text: grey-ish */
    --cc-bright: #ffffff;
    /* bold / headings */
    --cc-lavender: rgb(177, 185, 249);
    /* inline code, links */
    --cc-dim: rgb(153, 153, 153);
    /* bullets, quotes, secondary */
    --cc-orange: rgb(215, 119, 87);
    /* Claude accent */
    --cc-border: #3a3a3a;
    --cc-code-bg: rgba(255, 255, 255, 0.04);
    --cc-font: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;
    color: var(--cc-text) !important;
    font-family: var(--cc-font) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ---- emphasis ---- */
.markdown-body strong,
.markdown-body b {
    color: var(--cc-bright) !important;
    font-weight: 700 !important;
}

.markdown-body em,
.markdown-body i {
    color: var(--cc-text) !important;
    font-style: italic;
}

.markdown-body del {
    color: var(--cc-dim) !important;
}

/* ---- headings: terminal-style, bold white, small size range ---- */
.markdown-body :is(h1, h2, h3, h4, h5, h6) {
    color: var(--cc-bright) !important;
    font-family: var(--cc-font) !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-top: 1.4em !important;
    margin-bottom: 0.6em !important;
}

.markdown-body h1 {
    font-size: 1.3em !important;
    border-bottom: 1px solid !important;
}

.markdown-body h2 {
    font-size: 1.15em !important;
    text-decoration: underline;
}

.markdown-body h3 {
    font-size: 1.05em !important;
}

.markdown-body :is(h4, h5, h6) {
    font-size: 1em !important;
}

.markdown-body :is(h1, h2, h3, h4, h5, h6) .anchor {
    display: none;
}

/* ---- inline code: lavender, no box ---- */
.markdown-body :not(pre)>code,
.markdown-body tt {
    color: var(--cc-lavender) !important;
    background: transparent !important;
    padding: 0 !important;
    font-family: var(--cc-font) !important;
    font-size: 1em !important;
}

/* ---- code blocks ---- */
/* GitHub wraps fenced blocks in .highlight / .snippet-clipboard-content: style the wrapper, flatten the inner <pre>. */
.markdown-body :is(.highlight, .snippet-clipboard-content) {
    background: var(--cc-code-bg) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 6px !important;
}

.markdown-body :is(.highlight, .snippet-clipboard-content) pre {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* bare <pre> without a GitHub wrapper */
.markdown-body>pre {
    background: var(--cc-code-bg) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 6px !important;
}

.markdown-body pre,
.markdown-body pre code {
    font-family: var(--cc-font) !important;
    color: var(--cc-text) !important;
}

/* ---- links ---- */
.markdown-body a:not(.anchor) {
    color: var(--cc-lavender) !important;
    text-decoration: underline;
    text-decoration-color: rgba(177, 185, 249, 0.4);
    text-underline-offset: 3px;
}

.markdown-body a:not(.anchor):hover {
    text-decoration-color: var(--cc-lavender);
}

/* ---- lists ---- */
.markdown-body li::marker {
    color: var(--cc-dim);
}

.markdown-body li+li {
    margin-top: 0.15em;
}

/* ---- blockquotes: dim italic with a left bar ---- */
.markdown-body blockquote {
    color: var(--cc-dim) !important;
    font-style: italic;
    border-left: 2px solid var(--cc-dim) !important;
    padding-left: 1em !important;
}

/* ---- GitHub alerts (> [!NOTE] etc.) ---- */
.markdown-body .markdown-alert {
    color: var(--cc-text) !important;
}

.markdown-body .markdown-alert.markdown-alert-important,
.markdown-body .markdown-alert.markdown-alert-warning {
    border-left-color: var(--cc-orange) !important;
}

.markdown-body .markdown-alert .markdown-alert-title {
    color: var(--cc-bright) !important;
}

/* ---- tables: box-drawing feel ---- */
.markdown-body table th,
.markdown-body table td {
    border: 1px solid var(--cc-border) !important;
    background: transparent !important;
}

.markdown-body table th {
    color: var(--cc-bright) !important;
    font-weight: 700;
}

.markdown-body table tr {
    background: transparent !important;
    border: none !important;
}

/* ---- horizontal rule ---- */
.markdown-body hr {
    height: 0 !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid var(--cc-border) !important;
}

/* ---- misc ---- */
.markdown-body kbd {
    color: var(--cc-bright) !important;
    background: var(--cc-code-bg) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
}

.markdown-body img {
    background: transparent;
}