-
Notifications
You must be signed in to change notification settings - Fork 167
Open
Description
/*---------------------------------------------------------------------------*/
/* Responsive GitHub Theme - Core Modification Area */
.markdown-body {
overflow: auto;
/* Remove fixed width, use responsive width */
min-width: 320px; /* Minimum width to prevent excessive compression on mobile devices */
max-width: 90%; /* Use percentage width for automatic browser size adaptation */
width: 100%; /* Ensure container fills available space */
padding: 32px;
margin: 20px auto !important; /* Maintain horizontal centering */
/* Prevent content overflow */
box-sizing: border-box;
}
/* Tablet device optimization (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.markdown-body {
max-width: 85%;
padding: 24px;
}
}
/* Desktop device optimization (>1024px) */
@media screen and (min-width: 1025px) {
.markdown-body {
max-width: 830px; /* Restore original max width for large screens */
padding: 32px;
}
}
/* Small screen device optimization (<768px) */
@media screen and (max-width: 767px) {
.markdown-body {
max-width: 100%; /* Use full width on small screens */
padding: 16px; /* Reduce padding to save space */
margin: 10px auto !important;
}
}
/*---------------------------------------------------------------------------*/
/* Responsive Image Handling */
.markdown-body img {
background-color: transparent;
max-width: 100%; /* Auto-scale images */
height: auto; /* Maintain aspect ratio */
display: block;
}
/*---------------------------------------------------------------------------*/
/* Responsive Table Handling */
.markdown-body table {
display: block;
width: 100%;
overflow-x: auto; /* Enable horizontal scrolling for wide tables */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
/*---------------------------------------------------------------------------*/
/* Responsive Code Block Handling + Auto-Wrap */
.markdown-body pre {
overflow-x: auto; /* Horizontal scrolling for long code (fallback) */
max-width: 100%;
overflow-wrap: break-word; /* Force line breaks in modern browsers */
}
.markdown-body pre code {
display: block;
/* Key modification: Enable auto-wrap */
white-space: pre-wrap !important; /* Preserve spaces and auto-wrap */
word-wrap: break-word !important; /* Force break long words */
overflow-wrap: break-word !important; /* Modern standard property */
word-break: break-all; /* Break between any characters */
}
/* Inline code also supports wrapping */
.markdown-body code {
white-space: pre-wrap !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/*---------------------------------------------------------------------------*/
/* Blockquote Auto-Wrap Handling */
.markdown-body blockquote {
white-space: pre-wrap; /* Support line breaks */
word-wrap: break-word; /* Force break long words */
overflow-wrap: break-word;
overflow: hidden; /* Prevent content overflow */
}
.markdown-body blockquote p {
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
}After testing this Markdown Viewer browser extension for some time, I've identified some improvements that could enhance its functionality:
- Automatically adapt the rendering of Markdown content to the browser page dimensions.
- Enable automatic line wrapping in code blocks and blockquote sections.
To apply these modifications, copy the provided CSS section directly to the beginning of the themes.css file located in the extension's directory (for installed versions, typically at %APPDATA%/Local/{BrowserName}/User Data/Default/Extensions/{ExtensionID} - the ID can be found in the browser's extension management page details). Navigate to the /{version number} subfolder (currently 5.3.0 for this extension) and paste the code into content/themes.css. Save the file and refresh your browser to see the changes take effect under "THEME" → "AUTO" settings.
simov
Metadata
Metadata
Assignees
Labels
No labels