aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-28 03:04:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Prism.js syntax highlighting for code blocks

Browse Source 
- Install prismjs and rehype-prism-plus packages
- Integrate rehype-prism plugin into ReactMarkdown
- Use prism-tomorrow dark theme for syntax highlighting
- Enhanced code block styling with better padding and borders
- Inline code now has distinct styling from code blocks
- Monospace font for all code (Monaco, Menlo, Consolas)
- Improved readability with proper line-height and spacing
This commit is contained in:
Gigi
2025-10-13 16:55:06 +02:00
parent a794331c1a
commit 2de72b73c1
5 changed files with 233 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/index.css
View File

@@ -617,20 +617,67 @@
.reader-markdown a:hover { text-decoration: underline; }
.reader-markdown pre,
.reader-markdown code {
background: #111;
background: #1e1e1e;
border: 1px solid #333;
border-radius: 6px;
border-radius: 4px;
padding: 0.15rem 0.4rem;
font-size: 0.9em;
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}
.reader-markdown pre {
padding: 0.75rem;
overflow: auto;
background: #1e1e1e;
border: 1px solid #333;
border-radius: 8px;
padding: 1rem;
overflow-x: auto;
margin: 1rem 0;
line-height: 1.5;
}
.reader-markdown code {
padding: 0.1rem 0.3rem;
.reader-markdown pre code {
background: transparent;
border: none;
padding: 0;
font-size: 0.9em;
display: block;
}
/* Prism.js enhancements */
.reader-markdown pre[class*="language-"] {
background: #1e1e1e;
border: 1px solid #333;
}
.reader-markdown code[class*="language-"] {
background: transparent;
text-shadow: none;
}
.reader-html pre {
background: #1e1e1e;
border: 1px solid #333;
border-radius: 8px;
padding: 1rem;
overflow-x: auto;
margin: 1rem 0;
}
.reader-html code {
background: #1e1e1e;
border: 1px solid #333;
border-radius: 4px;
padding: 0.15rem 0.4rem;
font-size: 0.9em;
font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}
.reader-html pre code {
background: transparent;
border: none;
padding: 0;
display: block;
}
/* Mark as Read button */