Markdown Viewer

Automatically formats and displays .md files with a pleasant, readable theme and font settings.

Versione datata 08/06/2025. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Markdown Viewer
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  Automatically formats and displays .md files with a pleasant, readable theme and font settings.
// @author       https://github.com/anga83
// @match        *://*/*.md
// @include      file://*/*.md
// @resource     marked https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.umd.min.js
// @resource     css https://raw.githubusercontent.com/yrgoldteeth/darkdowncss/master/darkdown.css
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    // --- FONT SETTINGS ---

    const FONT_SETTINGS = {
        '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`,
        'sans-serif': `"Segoe UI", "SF Pro Text", "Ubuntu", "Arial", sans-serif`
    };

    function applyFontStyle() {
        const chosenFont = GM_getValue('fontStyle', 'serif');
        const fontFamily = FONT_SETTINGS[chosenFont] || FONT_SETTINGS.serif;
        GM_addStyle(`.markdown-body { font-family: ${fontFamily}; }`);
    }

    function setFontStyle() {
        let choice = prompt("Choose font style: 'serif' or 'sans-serif'", GM_getValue('fontStyle', 'serif'));
        if (choice === null) return;
        choice = choice.toLowerCase().trim();

        if (choice === 'serif' || choice === 'sans-serif') {
            GM_setValue('fontStyle', choice);
            alert(`Font style set to ${choice}. Reload the page to see the changes.`);
        } else {
            alert(`Invalid choice. Please enter 'serif' or 'sans-serif'.`);
        }
    }

    GM_registerMenuCommand('Set Font Style', setFontStyle);


    // --- MAIN SCRIPT EXECUTION ---

    const css = GM_getResourceText("css");
    GM_addStyle(css);

    // Apply custom styling fixes and improvements
    GM_addStyle(`
        body {
            margin: 0;
            background-color: rgb(27, 28, 29);
        }
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 12px 45px 45px;
        }
        /* Responsive images */
        .markdown-body img {
            max-width: 150%;
            height: auto;
            display: block;
        }
        /* Heading size and spacing adjustments */
        .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
            margin-top: 2em;
            margin-bottom: 0.8em;
        }
        .markdown-body h1:hover, .markdown-body h2:hover, .markdown-body h3:hover, .markdown-body h4:hover, .markdown-body h5:hover, .markdown-body h6:hover {
            text-decoration: underline;
        }
        .markdown-body h1 { font-size: 2.2em; }
        .markdown-body h2 { font-size: 1.8em; }
        .markdown-body h3 { font-size: 1.4em; }
        .markdown-body h4 { font-size: 1.2em; }
        .markdown-body h5 { font-size: 1em; }
        .markdown-body h6 { font-size: 0.9em; color: #888; }

        /* Style for code blocks and inline code */
        pre, code, kbd, samp {
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
            font-size: 1em;
        }
        /* Code background colors */
        pre {
            background-color: rgb(40, 42, 44);
            padding: 16px;
            overflow: auto;
            border-radius: 6px;
            border: 1px solid rgb(60, 62, 64);
        }
        :not(pre) > code {
            background-color: rgb(40, 42, 44);
            padding: .2em .4em;
            margin: 0;
            font-size: 85%;
            border-radius: 3px;
            border: 1px solid rgb(60, 62, 64);
        }
        .markdown-body ul {
            padding-left: 2em;
        }
        @media (max-width: 767px) {
            .markdown-body {
                padding: 20px 15px 15px;
            }
        }
    `);

    applyFontStyle();

    const markdownBody = document.createElement('div');
    markdownBody.className = 'markdown-body';

    const markedjs = GM_getResourceText("marked");
    eval(markedjs);

    const markdownContent = document.body.innerText;
    const htmlContent = marked.parse(markdownContent);

    document.body.innerHTML = '';
    document.body.appendChild(markdownBody);
    markdownBody.innerHTML = htmlContent;
})();