Skip to content

"Automatically adapt the rendering" and "Enable automatic line wrapping in code blocks, blockquote sections". #277

@hoyaani

Description

@hoyaani
/*---------------------------------------------------------------------------*/
/* 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:

  1. Automatically adapt the rendering of Markdown content to the browser page dimensions.
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions