aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-09 09:54:34 +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

4
src/components/ContentPanel.tsx
View File

@@ -2,7 +2,9 @@ import React, { useMemo, useState, useEffect } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
import rehypePrism from 'rehype-prism-plus'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import 'prismjs/themes/prism-tomorrow.css'
import { faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons'
import { RelayPool } from 'applesauce-relay'
import { IAccount } from 'applesauce-accounts'
@@ -219,7 +221,7 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
<div ref={markdownPreviewRef} style={{ display: 'none' }}>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw]}
rehypePlugins={[rehypeRaw, rehypePrism]}
components={{
img: ({ src, alt, ...props }) => (
<img

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 */

12
src/styles/components/reader.css
View File

@@ -26,9 +26,15 @@
.reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
.reader-markdown a { color: #8ab4f8; text-decoration: none; }
.reader-markdown a:hover { text-decoration: underline; }
.reader-markdown pre, .reader-markdown code { background: #111; border: 1px solid #333; border-radius: 6px; }
.reader-markdown pre { padding: 0.75rem; overflow: auto; }
.reader-markdown code { padding: 0.1rem 0.3rem; }
.reader-markdown 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-markdown pre { background: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1rem 0; line-height: 1.5; }
.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 */
.mark-as-read-container { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem; margin-top: 2rem; border-top: 1px solid #333; }
.mark-as-read-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 160px; justify-content: center; }