☰

Markdown Viewer

Automatically formats and displays .md files with a pleasant, readable theme and font settings. Turn your browser into the only Markdown viewer you need by giving your Tampermonkey access to local files.

  1. // ==UserScript==
  2. // @name         Markdown Viewer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0.2
  5. // @description  Automatically formats and displays .md files with a pleasant, readable theme and font settings. Turn your browser into the only Markdown viewer you need by giving your Tampermonkey access to local files.
  6. // @description:en Automatically formats and displays .md files with a pleasant, readable theme and font settings. Turn your browser into the only Markdown viewer you need by giving your Tampermonkey access to local files.
  7. // @description:de Automatisch .md-Dateien formatieren und anzeigen mit einem angenehmen, lesbaren Thema und Schriftarten. Machen Sie Ihren Browser zum einzigen Markdown-Viewer, den Sie benötigen, indem Sie Tampermonkey Zugriff auf lokale Dateien gewähren.
  8. // @author       https://github.com/anga83
  9. // @match        *://*/*.md
  10. // @include      file://*/*.md
  11. // @exclude      https://github.com/*
  12. // @exclude      http://github.com/*
  13. // @require      https://cdn.jsdelivr.net/npm/marked@12.0.2/lib/marked.umd.min.js
  14. // @resource     css_darkdown https://raw.githubusercontent.com/yrgoldteeth/darkdowncss/master/darkdown.css
  15. // @grant        GM_getResourceText
  16. // @grant        GM_setValue
  17. // @grant        GM_getValue
  18. // @grant        GM_registerMenuCommand
  19. // ==/UserScript==
  20.  
  21. (function() {
  22.     'use strict';
  23.  
  24.     // --- SETTINGS IDENTIFIERS ---
  25.     const FONT_STYLE_KEY = 'markdownViewer_fontStyle';
  26.     const THEME_KEY = 'markdownViewer_theme';
  27.     const STYLE_ELEMENT_ID_FONT = 'userscript-markdown-font-style';
  28.     const STYLE_ELEMENT_ID_THEME = 'userscript-markdown-theme-style';
  29.     const STYLE_ELEMENT_ID_BASE = 'userscript-markdown-base-style';
  30.  
  31.     // --- FONT SETTINGS ---
  32.     const FONT_SETTINGS = {
  33.         'serif': `Iowan Old Style, Apple Garamond, Baskerville, Georgia, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`,
  34.         'sans-serif': `"Segoe UI", "SF Pro Text", "Helvetica Neue", "Ubuntu", "Arial", sans-serif`
  35.     };
  36.  
  37.     function removeExistingStyleElement(id) {
  38.         const existingStyle = document.getElementById(id);
  39.         if (existingStyle) {
  40.             existingStyle.remove();
  41.         }
  42.     }
  43.  
  44.     function addStyleElement(id, css) {
  45.         removeExistingStyleElement(id);
  46.         const style = document.createElement('style');
  47.         style.id = id;
  48.         style.textContent = css;
  49.         (document.head || document.documentElement).appendChild(style);
  50.     }
  51.  
  52.     function applyFontStyle() {
  53.         const chosenFont = GM_getValue(FONT_STYLE_KEY, 'serif'); // Standard 'serif'
  54.         const fontFamily = FONT_SETTINGS[chosenFont] || FONT_SETTINGS.serif;
  55.         addStyleElement(STYLE_ELEMENT_ID_FONT, `.markdown-body { font-family: ${fontFamily} !important; }`);
  56.     }
  57.  
  58.     // --- THEME SETTINGS ---
  59.     function applyThemeStyle() {
  60.         const chosenTheme = GM_getValue(THEME_KEY, 'system'); // 'system', 'light', 'dark'
  61.         const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
  62.  
  63.         let useDarkTheme = false;
  64.         if (chosenTheme === 'dark') {
  65.             useDarkTheme = true;
  66.         } else if (chosenTheme === 'system' && prefersDarkScheme) {
  67.             useDarkTheme = true;
  68.         }
  69.  
  70.         let themeCss = '';
  71.         if (useDarkTheme) {
  72.             const darkdownCss = GM_getResourceText("css_darkdown");
  73.             if (darkdownCss) {
  74.                  themeCss += darkdownCss;
  75.             }
  76.             // Dark Theme
  77.             themeCss += `
  78.                 body {
  79.                     background-color: rgb(27, 28, 29) !important;
  80.                     color: rgb(220, 220, 220) !important;
  81.                 }
  82.                 .markdown-body {
  83.                     color: rgb(220, 220, 220) !important;
  84.                 }
  85.                 .markdown-body a { 
  86.                     color: #79b8ff !important; /* Dezenter blau-türkis Farbton statt kräftiges Blau */
  87.                     text-decoration: none !important; /* Keine Unterstreichung standardmäßig */
  88.                 }
  89.                 .markdown-body a:hover {
  90.                     text-decoration: underline !important; /* Nur beim Hovern unterstreichen */
  91.                 }
  92.                 .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  93.                     border-bottom-color: #30363d !important;
  94.                     color: rgb(220, 220, 220) !important;
  95.                 }
  96.                 .markdown-body hr { background-color: #30363d !important; }
  97.                 .markdown-body blockquote {
  98.                     color: #a0a0a0 !important;
  99.                     border-left-color: #30363d !important;
  100.                 }
  101.                 .markdown-body table th, .markdown-body table td { border-color: #484f58 !important; }
  102.                 .markdown-body code:not(pre code) { /* Inline code */
  103.                     background-color: rgb(50, 50, 50) !important;
  104.                     border: 1px solid rgb(70, 70, 70) !important;
  105.                     color: rgb(220, 220, 220) !important;
  106.                 }
  107.                 .markdown-body pre { /* Code block */
  108.                     background-color: rgb(40, 42, 44) !important;
  109.                     border: 1px solid rgb(60, 62, 64) !important;
  110.                 }
  111.                 .markdown-body pre code {
  112.                      color: rgb(220, 220, 220) !important;
  113.                 }
  114.                 .markdown-body kbd {
  115.                     background-color: rgb(50,50,50) !important;
  116.                     border: 1px solid rgb(70,70,70) !important;
  117.                     color: rgb(220,220,220) !important;
  118.                     border-bottom-color: rgb(80,80,80) !important;
  119.                 }
  120.                 .markdown-body img { filter: brightness(.8) contrast(1.2); }
  121.                 
  122.                 /* Dark Mode Button Styling */
  123.                 .custom-play-button {
  124.                     background-color: #444d56 !important; /* Dunklerer, weniger aufdringlicher Grauton */
  125.                     color: #e1e4e8 !important; /* Helle Schrift für dunklen Hintergrund */
  126.                     border: 1px solid #586069 !important; /* Dezenter Rand */
  127.                 }
  128.                 .custom-play-button:hover, .custom-play-button:focus {
  129.                     background-color: #586069 !important; /* Etwas heller beim Hover */
  130.                     color: #e1e4e8 !important;
  131.                     border-color: #6a737d !important;
  132.                 }
  133.                 .custom-play-button a {
  134.                     color: #e1e4e8 !important; /* Links erben die Button-Textfarbe */
  135.                     text-decoration: none !important;
  136.                 }
  137.                 .custom-play-button a:hover {
  138.                     color: #e1e4e8 !important; /* Auch beim Hover Button-Farbe beibehalten */
  139.                     text-decoration: none !important;
  140.                 }
  141.             `;
  142.         } else { // Light Theme
  143.             themeCss += `
  144.                 body {
  145.                     background-color: #ffffff !important;
  146.                     color: #24292e !important;
  147.                 }
  148.                 .markdown-body {
  149.                     color: #24292e !important;
  150.                 }
  151.                 .markdown-body a { 
  152.                     color: #0366d6 !important; 
  153.                     text-decoration: none !important; /* Keine Unterstreichung standardmäßig */
  154.                 }
  155.                 .markdown-body a:hover {
  156.                     text-decoration: underline !important; /* Nur beim Hovern unterstreichen */
  157.                 }
  158.                 .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  159.                     border-bottom-color: #eaecef !important;
  160.                     color: #24292e !important;
  161.                 }
  162.                 .markdown-body hr { background-color: #e1e4e8 !important; }
  163.                 .markdown-body blockquote {
  164.                     color: #6a737d !important;
  165.                     border-left-color: #dfe2e5 !important;
  166.                 }
  167.                 .markdown-body table th, .markdown-body table td { border: 1px solid #dfe2e5 !important; }
  168.                 .markdown-body code:not(pre code) { /* Inline code */
  169.                     background-color: rgba(27,31,35,.07) !important;
  170.                     border: 1px solid rgba(27,31,35,.1) !important;
  171.                     color: #24292e !important;
  172.                 }
  173.                 .markdown-body pre { /* Code block */
  174.                     background-color: #f6f8fa !important;
  175.                     border: 1px solid #eaecef !important;
  176.                 }
  177.                  .markdown-body pre code {
  178.                     color: #24292e !important;
  179.                 }
  180.                 .markdown-body kbd {
  181.                     background-color: #fafbfc !important;
  182.                     border: 1px solid #d1d5da !important;
  183.                     border-bottom-color: #c6cbd1 !important;
  184.                     color: #444d56 !important;
  185.                 }
  186.                 .markdown-body img { filter: none; }
  187.                 
  188.                 /* Light Mode Button Styling */
  189.                 .custom-play-button {
  190.                     background-color: #f6f8fa !important; /* Heller, subtiler Grauton */
  191.                     color: #24292e !important; /* Dunkle Schrift für hellen Hintergrund */
  192.                     border: 1px solid #d1d5da !important; /* Dezenter Rand */
  193.                 }
  194.                 .custom-play-button:hover, .custom-play-button:focus {
  195.                     background-color: #e1e4e8 !important; /* Etwas dunkler beim Hover */
  196.                     color: #24292e !important;
  197.                     border-color: #c6cbd1 !important;
  198.                 }
  199.                 .custom-play-button a {
  200.                     color: #24292e !important; /* Links erben die Button-Textfarbe */
  201.                     text-decoration: none !important;
  202.                 }
  203.                 .custom-play-button a:hover {
  204.                     color: #24292e !important; /* Auch beim Hover Button-Farbe beibehalten */
  205.                     text-decoration: none !important;
  206.                 }
  207.             `;
  208.         }
  209.         addStyleElement(STYLE_ELEMENT_ID_THEME, themeCss);
  210.     }
  211.  
  212.     // --- MENU COMMANDS ---
  213.     GM_registerMenuCommand('Font: Serif', () => {
  214.         GM_setValue(FONT_STYLE_KEY, 'serif');
  215.         applyFontStyle();
  216.     });
  217.  
  218.     GM_registerMenuCommand('Font: Sans-serif', () => {
  219.         GM_setValue(FONT_STYLE_KEY, 'sans-serif');
  220.         applyFontStyle();
  221.     });
  222.  
  223.     GM_registerMenuCommand('Theme: System', () => {
  224.         GM_setValue(THEME_KEY, 'system');
  225.         applyThemeStyle();
  226.     });
  227.  
  228.     GM_registerMenuCommand('Theme: Light', () => {
  229.         GM_setValue(THEME_KEY, 'light');
  230.         applyThemeStyle();
  231.     });
  232.  
  233.     GM_registerMenuCommand('Theme: Dark', () => {
  234.         GM_setValue(THEME_KEY, 'dark');
  235.         applyThemeStyle();
  236.     });
  237.  
  238.     // --- BASE STYLES ---
  239.     function applyBaseStyles() {
  240.         addStyleElement(STYLE_ELEMENT_ID_BASE, `
  241.             body {
  242.                 margin: 0;
  243.             }
  244.             .markdown-body {
  245.                 box-sizing: border-box;
  246.                 min-width: 200px;
  247.                 max-width: 980px;
  248.                 margin: 0 auto;
  249.                 padding: 15px 30px 30px;
  250.             }
  251.             .markdown-body img {
  252.                 max-width: 100%; /* Korrigiert von 150% auf 100% */
  253.                 height: auto;
  254.                 display: block;
  255.                 margin-left: auto;
  256.                 margin-right: auto;
  257.                 border-radius: 3px;
  258.             }
  259.             .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  260.                 margin-top: 1.8em;
  261.                 margin-bottom: 0.7em;
  262.                 padding-bottom: 0.3em; /* Für die untere Linie */
  263.             }
  264.             .markdown-body h1:hover, .markdown-body h2:hover, .markdown-body h3:hover, .markdown-body h4:hover, .markdown-body h5:hover, .markdown-body h6:hover {
  265.                 text-decoration: underline; /* Direkte Unterstreichung der Überschriften beim Hovern */
  266.             }
  267.             .markdown-body h1 { font-size: 2.1em; }
  268.             .markdown-body h2 { font-size: 1.7em; }
  269.             .markdown-body h3 { font-size: 1.4em; }
  270.             .markdown-body h4 { font-size: 1.2em; }
  271.             .markdown-body h5 { font-size: 1.05em; }
  272.             .markdown-body h6 { font-size: 0.9em; }
  273.  
  274.             /* Code font family (colors/backgrounds are in theme) */
  275.             .markdown-body code, .markdown-body kbd, .markdown-body samp, .markdown-body pre {
  276.                 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  277.                 font-size: 0.9em; /* Etwas kleiner für bessere Lesbarkeit im Fließtext */
  278.             }
  279.             .markdown-body pre {
  280.                 padding: 16px;
  281.                 overflow: auto;
  282.                 border-radius: 6px;
  283.                 line-height: 1.45;
  284.             }
  285.             .markdown-body code:not(pre code) { /* Inline code */
  286.                 padding: .2em .4em;
  287.                 margin: 0 .2em; /* Kleiner horizontaler Abstand */
  288.                 font-size: 88%; /* Relativ zur umgebenden Schriftgröße */
  289.                 border-radius: 3px;
  290.             }
  291.             .markdown-body kbd {
  292.                 padding: .2em .4em;
  293.                 margin: 0 .2em;
  294.                 font-size: 88%;
  295.                 border-radius: 3px;
  296.             }
  297.             .markdown-body ul, .markdown-body ol {
  298.                 padding-left: 2em; /* Standardeinzug für Listen */
  299.             }
  300.             .markdown-body table {
  301.                 display: block; /* Für Responsivität und Overflow */
  302.                 width: max-content; /* Passt sich dem Inhalt an, aber nicht breiter als Container */
  303.                 max-width: 100%;
  304.                 overflow: auto; /* Scrollbar bei Bedarf */
  305.                 border-spacing: 0;
  306.                 border-collapse: collapse;
  307.                 margin-top: 1em;
  308.                 margin-bottom: 1em;
  309.             }
  310.             .markdown-body table th, .markdown-body table td {
  311.                 padding: 6px 13px;
  312.             }
  313.             .markdown-body blockquote {
  314.                 margin-left: 0; /* Standard-Blockquote-Styling */
  315.                 margin-right: 0;
  316.                 padding: 0 1em; /* Innenabstand */
  317.             }
  318.             @media (max-width: 767px) {
  319.                 .markdown-body {
  320.                     padding: 20px 15px 15px;
  321.                 }
  322.                 .markdown-body h1 { font-size: 1.8em; }
  323.                 .markdown-body h2 { font-size: 1.5em; }
  324.                 .markdown-body h3 { font-size: 1.3em; }
  325.             }
  326.  
  327.             /* Custom Button Base Style */
  328.             .custom-play-button {
  329.                 display: inline-block;
  330.                 padding: 10px 18px;
  331.                 text-decoration: none !important;
  332.                 border-radius: 5px;
  333.                 border: none;
  334.                 font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", "Ubuntu", "Arial", sans-serif;
  335.                 font-size: 0.95em;
  336.                 font-weight: 500;
  337.                 text-align: center;
  338.                 cursor: pointer;
  339.                 margin: 8px 0;
  340.                 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  341.             }
  342.             .custom-play-button a {
  343.                 color: inherit !important;
  344.                 text-decoration: none !important;
  345.             }
  346.         `);
  347.     }
  348.  
  349.     // --- MAIN SCRIPT EXECUTION ---
  350.     function initializeViewer() {
  351.         applyBaseStyles();
  352.         applyThemeStyle();
  353.         applyFontStyle();
  354.  
  355.         // Listener für System-Theme-Änderungen
  356.         if (GM_getValue(THEME_KEY, 'system') === 'system') {
  357.             const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  358.             mediaQuery.removeEventListener('change', applyThemeStyle); // Vorsichtshalber entfernen
  359.             mediaQuery.addEventListener('change', applyThemeStyle);
  360.         }
  361.  
  362.         const markdownBodyDiv = document.createElement('div');
  363.         markdownBodyDiv.className = 'markdown-body';
  364.  
  365.         // Überprüfen, ob marked durch @require geladen wurde
  366.         if (typeof marked === 'undefined' || typeof marked.parse !== 'function') {
  367.             console.error("Markdown Viewer: Marked.js library not loaded correctly via @require or 'parse' function is missing.");
  368.             console.error("Markdown Viewer: typeof marked:", typeof marked);
  369.             if (typeof marked !== 'undefined') {
  370.                 console.error("Markdown Viewer: marked properties:", Object.keys(marked));
  371.                 console.error("Markdown Viewer: typeof marked.parse:", typeof marked.parse);
  372.             }
  373.             markdownBodyDiv.innerHTML = `<p style="color:red; font-family:sans-serif;">Error: Marked.js library could not be loaded. Check console for details.</p>`;
  374.             document.body.innerHTML = ''; // Vorhandenen Inhalt löschen
  375.             document.body.appendChild(markdownBodyDiv);
  376.             return;
  377.         }
  378.  
  379.         try {
  380.             let markdownContentToParse = "";
  381.             if (document.contentType === 'text/markdown' ||
  382.                 (location.protocol === 'file:' && document.body && document.body.children.length === 1 && document.body.firstChild.tagName === 'PRE')) {
  383.                 markdownContentToParse = document.body.firstChild.innerText;
  384.             } else if (document.body && document.body.innerText) {
  385.                 markdownContentToParse = document.body.innerText;
  386.             } else if (document.body && document.body.textContent) {
  387.                  markdownContentToParse = document.body.textContent;
  388.             }
  389.  
  390.             const renderer = new marked.Renderer();
  391.             const originalLinkRenderer = renderer.link;
  392.  
  393.             renderer.link = (href, title, text) => {
  394.                 const buttonPattern = /^\s*<kbd>\s*<br>\s*➡️ Play it right now in your browser\s*<br>\s*<\/kbd>\s*$/i;
  395.  
  396.                 if (buttonPattern.test(text)) {
  397.                     const buttonText = "➡️ Play it right now in your browser";
  398.                     return `<a href="${href}" ${title ? `title="${title}"` : ''} class="custom-play-button" target="_blank" rel="noopener noreferrer">${buttonText}</a>`;
  399.                 }
  400.                 return originalLinkRenderer.call(renderer, href, title, text);
  401.             };
  402.  
  403.             marked.use({ renderer });
  404.  
  405.             const htmlContent = marked.parse(markdownContentToParse);
  406.  
  407.             document.body.innerHTML = '';
  408.             document.body.appendChild(markdownBodyDiv);
  409.             markdownBodyDiv.innerHTML = htmlContent;
  410.  
  411.         } catch (e) {
  412.             console.error("Markdown Viewer: Error during Markdown parsing:", e);
  413.             markdownBodyDiv.innerHTML = `<p style="color:red; font-family:sans-serif;">Error rendering Markdown: ${e.message}. Check console for details.</p>`;
  414.             if (!document.body.contains(markdownBodyDiv)) {
  415.                  document.body.innerHTML = '';
  416.                  document.body.appendChild(markdownBodyDiv);
  417.             }
  418.         }
  419.     }
  420.  
  421.     // Stelle sicher, dass das DOM bereit ist, bevor es manipuliert wird
  422.     if (document.readyState === "complete" || document.readyState === "interactive") {
  423.         initializeViewer();
  424.     } else {
  425.         document.addEventListener("DOMContentLoaded", initializeViewer);
  426.     }
  427.  
  428. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址