☰

Markdown Viewer Lite

A Lite Version of Markdown Viewer, view Markdown in Chrome,23 common language surportted

目前为 2017-10-16 提交的版本。查看 最新版本。

// ==UserScript==
// @name         Markdown Viewer Lite
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  A Lite Version of Markdown Viewer, view Markdown in Chrome,23 common language surportted
// @require      https://gf.qytechs.cn/scripts/34223-doccodestyle/code/docCodeStyle.js?version=224301
// @require      https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js
// @require      https://gf.qytechs.cn/scripts/34224-prism23-js/code/prism23js.js?version=224302
// @author       黄盐
// @match        file:///*md
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @run-at       document-end
// ==/UserScript==
(function() {
    //  'use strict';
    const codeStyleElementId = 'prismCodeTheme';
    const docStyleElementId = 'docTheme';
    var codeStyle = document.getElementById('codeStyleElementId');
    var docStyle = document.getElementById('docStyleElementId');

    var optionsDefault = {
        'breaks': false,
        'gfm': true,
        'pedantic': false,
        'sanitize': false,
        'smartLists': true,
        'smartypants': false,
        'tables': true,
    };

    if (GM_getValue('prismCodeTheme') === undefined) {
        GM_setValue('prismCodeTheme', prismCodeTheme)
    }
    if (GM_getValue('docTheme') === undefined) {
        GM_setValue('docTheme', docTheme)
    }
    if (GM_getValue('options') === undefined) {
        GM_setValue('options', optionsDefault)
    }
    if (GM_getValue('curPismCodeTheme') === undefined) {
        GM_setValue('curPismCodeTheme', 'solarized')
    }
    if (GM_getValue('curDocTheme') === undefined) {
        GM_setValue('curDocTheme', 'github')
    }


    function _htmlClass() { /*check and set div#_html class*/
        let a = GM_getValue('curDocTheme');
        if (a === 'github' || a === 'github_dark') {
            document.getElementById('_html').setAttribute('class', 'markdown-body');
        } else {
            document.getElementById('_html').setAttribute('class', 'markdown-theme');
        }
    }

    function addstyle(styleString, id) { /*create and append <style> element*/
        let a = document.createElement('style');
        a.id = id;
        a.innerText = styleString;
        if (document.head) {
            document.head.appendChild(a);
        } else {
            document.insertBefore(document.createElement('head'), document.body);
            document.head.appendChild(a);
        }
    }

    function changeStyle(e) { /* change code style or doc style */
        let a = e.target.dataset.type; //docTheme|prismCodeTheme
        let b = e.target.dataset.theme; //themename
        let c = document.getElementById(a); //<style> node
        let tmp = GM_getValue(a);
        c.innerHTML = tmp[b];
        //changeElementStyle
        a === 'docTheme' ? (GM_setValue('curDocTheme', b), _htmlClass()) : GM_setValue('curPismCodeTheme', b);
        let d = document.querySelectorAll(`#gear label[data-type=${a}`);
        for (let i = 0; i < d.length; i++) {
            d[i].dataset.using = false;
        }
        document.querySelector(`#gear label[data-theme=${b}`).dataset.using = true;
    }

    function changeOption(e) { /* parse according to options */
        let a = e.target.dataset.opt;
        let opt = GM_getValue('options');
        opt[a] = !opt[a];
        GM_setValue('options', opt);
        let htmlTxt = marked(document.getElementById('markdownText').value, opt);
        document.getElementById('_html').innerHTML = htmlTxt;
        setTimeout(() => Prism.highlightAll(), 20);
        //changeElementStyle
        document.querySelector(`#gear label[data-opt=${a}]`).dataset.using = opt[a];
    }

    addstyle(docTheme[GM_getValue('curDocTheme')], docStyleElementId);
    addstyle(prismCodeTheme[GM_getValue('curPismCodeTheme')], codeStyleElementId);
    /* set marked options */
    marked.setOptions(GM_getValue('options'));
    /* storage the markdown text */
    let mdSource = document.body.innerText;
    let mdSourceNode = document.createElement('textarea');
    mdSourceNode.id = 'markdownText';
    mdSourceNode.value = mdSource;
    mdSourceNode.setAttribute('style', 'display:none;');
    /* transfer codes, set container, replace Markdown code, add stylesheet */
    let htmlTxt = marked(mdSource);
    let _html = document.createElement('div');
    _html.id = '_html';
    _html.innerHTML = htmlTxt;
    document.body.innerHTML = '';
    document.body.appendChild(_html);
    _htmlClass();

    setTimeout(() => Prism.highlightAll(), 20);
    /*append mdSourceNode*/
    document.body.appendChild(mdSourceNode);
    /* global Css & Settings Css*/
    GM_addStyle(`html,body{padding:0 !important;margin:0 !important;width:auto !important;max-width:100% !important;}pre#_markdown{word-wrap:break-word;white-space:pre-wrap;}.markdown-body{overflow:auto;min-width:888px;max-width:888px;background-color:#fff;border:1px solid #ddd;padding:45px;margin:20px auto;}.markdown-body #_html>*:first-child{margin-top:0 !important;}.markdown-body #_html>*:last-child{margin-bottom:0 !important;}.markdown-body img{background-color:transparent;}.markdown-theme{box-sizing:border-box;max-width:100% !important;padding:20px !important;margin:0 auto !important;}@media (max-width:767px){.markdown-theme{width:auto !important;}}@media (min-width:768px) and (max-width:992px){.markdown-theme{width:713px !important;}}@media (min-width:992px) and (max-width:1200px){.markdown-theme{width:937px !important;}}@media (min-width:1200px){.markdown-theme{width:1145px !important;}}body{display:flex;}body._toc-left{padding-left:300px !important;}body._toc-right{padding-right:300px !important;}#_toc{position:fixed;top:0;bottom:0;left:0;width:300px;height:100%;background:#fafafa;overflow-y:auto;overflow-x:hidden;}#_toc #_ul{padding:0 0 0 20px !important;margin:0 !important;}#_toc #_ul a{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif !important;font-size:14px !important;line-height:17px !important;color:#364149 !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;text-transform:none !important;letter-spacing:0.2px !important;background:none !important;border:0 !important;padding:10px 15px !important;display:block !important;}#_toc #_ul a:hover{text-decoration:underline !important;}@font-face{font-family:octicons-link;src:url(data:font/woff;charset=utf-8;base64,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) format('woff');}.octicon{font:normal normal 16px 'octicons-link';line-height:1;display:inline-block;text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.octicon-link:before{content:'\\f05c';}.octicon-link{display:none;color:#000;vertical-align:middle;}.anchor{display:flex;flex-direction:column;justify-content:center;}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{height:1em;padding-left:8px;margin-left:-28px;line-height:1;text-decoration:none;}.markdown-body h1:hover .octicon-link,.markdown-body h2:hover .octicon-link,.markdown-body h3:hover .octicon-link,.markdown-body h4:hover .octicon-link,.markdown-body h5:hover .octicon-link,.markdown-body h6:hover .octicon-link{display:inline-block;}.emojione{font-size:inherit;height:3ex;width:3.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;}img.emojione{width:auto;}#gear *{font-size:16px !important;}#gear{width:360px;text-align:center;background:#222;position:fixed;right:15px;bottom:15px;border-radius:10px;visibility:hidden;}#gear label,#gear span{float:right;cursor:pointer;display:block;list-style-type:none;line-height:20px;color:#eee;padding:3px 10px;border-radius:5px;}#gear label{width:160px;}#gear span{width:340px;}#gear label:hover{background:darkcyan !important;}#gear label[data-using*=true]{background:darkcyan;}#gear .tt{font:16px bold;background:#555 !important;}#gear div{display:inline-block;min-width:200px;text-align:left;}#setting{cursor:pointer;font-size:30px !important;min-width:45px;padding:0 0 5px 0;max-height:45px;text-align:center;color:cyan;background:#222;position:fixed;right:15px;bottom:15px;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30);border:2px solid cyan;border-radius:15px;}#setting:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}`);

    function gear() { /* settings */
        let j = GM_getValue('options');
        let a = document.createElement('div');
        a.name = 'gear';
        a.setAttribute('style', 'styleCss');
        let tmp = `<div id='gear'><span class='tt'>Document Theme</span>`;
        for (let i in docTheme) {
            tmp += `<label data-theme='${i}'data-type='docTheme' data-using=${i == GM_getValue('curDocTheme')}>${i}</label>`;
        }
        tmp += `<span class='tt'>Code Theme</span>`;
        for (let i in prismCodeTheme) {
            tmp += `<label data-theme='${i}'data-type='prismCodeTheme' data-using=${i == GM_getValue('curPismCodeTheme')}>${i}</label>`;
        }
        tmp += `<span class='tt'>Options</span>`;
        for (let i in j) {
            tmp += `<label data-opt='${i}'data-type='options' data-using='${j[i]}'>${i}</label>`;
        }
        tmp += `</div><div id='setting'onclick="(function(){if(document.getElementById('gear').style.visibility === 'visible') {document.getElementById('gear').style.visibility = 'hidden'}else{document.getElementById('gear').style.visibility = 'visible'}})()">▞</div>`;

        a.innerHTML = tmp;
        document.body.appendChild(a);
    }
    gear();
    let d = document.querySelectorAll('#gear label[data-theme]');
    for (let i = 0; i < d.length; i++) {
        d[i].addEventListener('click', changeStyle, false);
    }
    d = document.querySelectorAll('#gear label[data-opt]');
    for (let i = 0; i < d.length; i++) {
        d[i].addEventListener('click', changeOption, false);
    }

})();

QingJ © 2025

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