andy-stack_vaultkeeper-ai/styles/markdown.css
Andrew Beal 3f37870aaa Add markdown rendering support with KaTeX and highlight.js
- Updated package.json to include dependencies for rehype and remark plugins for markdown processing.
- Added default highlight.js CSS for code highlighting.
- Included KaTeX CSS for rendering mathematical expressions.
- Created markdown.css for styling markdown content in the Obsidian plugin, incorporating styles for headings, paragraphs, lists, tables, and code blocks.
- Customized highlight.js colors to match Obsidian theme.
2025-09-16 17:14:37 +01:00

153 lines
No EOL
3.6 KiB
CSS

/* Import the downloaded CSS files */
@import './katex.min.css';
@import './highlight-default.min.css';
/* Additional markdown styling for Obsidian plugin */
.markdown-processor-content {
line-height: 1.6;
color: var(--text-normal);
}
.markdown-processor-content h1,
.markdown-processor-content h2,
.markdown-processor-content h3,
.markdown-processor-content h4,
.markdown-processor-content h5,
.markdown-processor-content h6 {
margin: 1rem 0 0.5rem 0;
color: var(--text-normal);
font-weight: var(--font-weight-bold);
}
.markdown-processor-content h1 { font-size: 1.5em; }
.markdown-processor-content h2 { font-size: 1.3em; }
.markdown-processor-content h3 { font-size: 1.1em; }
.markdown-processor-content p {
margin: 0.5rem 0;
}
.markdown-processor-content pre {
background-color: var(--background-primary-alt);
padding: 1rem;
border-radius: var(--radius-s);
overflow-x: auto;
margin: 0.5rem 0;
border: 1px solid var(--background-modifier-border);
}
.markdown-processor-content code {
background-color: var(--background-primary-alt);
padding: 2px 4px;
border-radius: var(--radius-s);
font-family: var(--font-monospace);
font-size: 0.9em;
}
.markdown-processor-content pre code {
background-color: transparent;
padding: 0;
}
.markdown-processor-content blockquote {
border-left: 4px solid var(--background-modifier-border);
margin: 1rem 0;
padding-left: 1rem;
color: var(--text-muted);
font-style: italic;
}
.markdown-processor-content ul,
.markdown-processor-content ol {
padding-left: 1.5rem;
margin: 0.5rem 0;
}
.markdown-processor-content li {
margin: 0.25rem 0;
}
.markdown-processor-content table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
border: 1px solid var(--background-modifier-border);
}
.markdown-processor-content th,
.markdown-processor-content td {
border: 1px solid var(--background-modifier-border);
padding: 8px 12px;
text-align: left;
}
.markdown-processor-content th {
background-color: var(--background-primary-alt);
font-weight: var(--font-weight-bold);
}
.markdown-processor-content a {
color: var(--text-accent);
text-decoration: none;
}
.markdown-processor-content a:hover {
text-decoration: underline;
}
/* Math content styling adjustments for Obsidian */
.markdown-processor-content .katex {
font-size: 1.1em;
}
.markdown-processor-content .katex-display {
margin: 1rem 0;
text-align: center;
}
/* Task list styling */
.markdown-processor-content input[type="checkbox"] {
margin-right: 0.5rem;
}
/* Footnotes styling */
.markdown-processor-content .footnotes {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--background-modifier-border);
font-size: 0.9em;
}
/* Override highlight.js colors to use Obsidian theme colors */
.markdown-processor-content .hljs {
background: var(--background-primary-alt) !important;
color: var(--text-normal) !important;
}
.markdown-processor-content .hljs-comment,
.markdown-processor-content .hljs-quote {
color: var(--text-muted) !important;
}
.markdown-processor-content .hljs-keyword,
.markdown-processor-content .hljs-selector-tag,
.markdown-processor-content .hljs-literal {
color: var(--text-accent) !important;
}
.markdown-processor-content .hljs-string,
.markdown-processor-content .hljs-doctag {
color: var(--color-green) !important;
}
.markdown-processor-content .hljs-title,
.markdown-processor-content .hljs-section,
.markdown-processor-content .hljs-type {
color: var(--color-blue) !important;
}
.markdown-processor-content .hljs-number,
.markdown-processor-content .hljs-variable,
.markdown-processor-content .hljs-template-variable {
color: var(--color-purple) !important;
}