☰

Markdown Viewer Lite

view Markdown in Chrome,23 common language surportted

目前為 2017-10-23 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2.     // @name         Markdown Viewer Lite
  3.     // @namespace    http://tampermonkey.net/
  4.     // @version      0.5
  5.     // @description  view Markdown in Chrome,23 common language surportted
  6.     // @require      https://cdn.staticfile.org/zepto/1.2.0/zepto.min.js
  7.     // @require      https://greasyfork.org/scripts/34223-doccodestyle/code/docCodeStyle.js?version=225061
  8.     // @require      https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js
  9.     // @require      https://greasyfork.org/scripts/34224-prism23-js/code/prism23js.js?version=224302
  10.     // @resource     http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
  11.     // ==============  katex  ===============
  12.     // @description     https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.css
  13.     // @description      https://greasyfork.org/scripts/34253-katex/code/KaTeX.js?version=224512
  14.     // @description      https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/contrib/auto-render.min.js
  15.     // ==============  flowchart ============
  16.     // @description      https://cdn.staticfile.org/raphael/2.2.7/raphael.min.js
  17.     // @description      http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js
  18.     // @description      https://cdn.staticfile.org/flowchart/1.6.5/flowchart.min.js
  19.     // ==============  Sequence Diagram ============
  20.     // -@description-    https://greasyfork.org/scripts/34307-sequence-diagrams/code/sequence-diagrams.js?version=224764
  21.     // @description      https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js
  22.     // @description      http://apps.bdimg.com/libs/webfont/1.3.0/webfont.js
  23.     // @description      https://cdn.staticfile.org/snap.svg/0.5.1/snap.svg-min.js
  24.     // @description      http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js
  25.     // @description      https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js
  26.  
  27.     // @description      https://cdn.staticfile.org/js-sequence-diagrams/1.0.6/sequence-diagram-min.js
  28.     // @description      https://raw.githubusercontent.com/bramp/js-sequence-diagrams/master/src/sequence-diagram.js
  29.     // @description      https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-snap-min.js
  30.  
  31.     // @author       黄盐
  32.     // @match        file:///*md
  33.     // @grant        GM_addStyle
  34.     // @grant        GM_setValue
  35.     // @grant        GM_getValue
  36.     // @grant        unsafeWindow
  37.     // @run-at       document-end
  38. // ==/UserScript==
  39. (function() {
  40.      'use strict';
  41.     var codeStyleElementId = 'prismCT';   //prism code theme
  42.     var docStyleElementId = 'docTheme';
  43.     var TIMESTEP = 500; //setInterval argument milliseconds
  44.     var addonRsc = {
  45.         'EMOJI':['emojiJs','emojiCss'],
  46.         'KATEX':['katexCss', 'katexJs', 'autoRenderJs'],
  47.         'FLOWCHART':['raphaelJs', 'flowchartJs'],
  48.         'FONTAWESOME':['fontAwesomeCss'],
  49.         'MERMAID':['mermaidJs'],
  50.         'SEQUENCEDIAGRAM':['webfont', 'snapSVG', 'underscore', 'sqcDiagr']
  51.     };
  52.     var addonDefaultState = {
  53.         'EMOJI':false,
  54.         'KATEX':false,
  55.         'FLOWCHART':false,
  56.         'FONTAWESOME':false,
  57.         'MERMAID':false,
  58.         'SEQUENCEDIAGRAM':false
  59.     };
  60.     var resource = {
  61.         'zEpto': 'https://cdn.staticfile.org/zepto/1.2.0/zepto.min.js',
  62.         /*EMOJI*/
  63.         'emojiCss': {
  64.             'type': 'link',
  65.             'id': 'emojiCss',
  66.             'rel': 'stylesheet',
  67.             'href': 'https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css'
  68.         },
  69.         'emojiJs': {
  70.             'type': 'script',
  71.             'id': 'emojiJs',
  72.             'src': 'https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js'
  73.         },
  74.         /*FONT AWESOME*/
  75.         'fontAwesomeCss': {
  76.             'type': 'link',
  77.             'id': 'fontAwesomeCss',
  78.             'rel': 'stylesheet',
  79.             'href': 'http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
  80.         },
  81.         /*KATEX*/
  82.         'katexCss': {
  83.             'type': 'link',
  84.             'id': 'katexCss',
  85.             'rel': 'stylesheet',
  86.             'href': 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.css'
  87.         },
  88.         'katexJs': {
  89.             'type': 'script',
  90.             'id': 'katexJs',
  91.             'src': 'https://greasyfork.org/scripts/34253-katex/code/KaTeX.js?version=224512'
  92.         },
  93.         'autoRenderJs': {
  94.             'type': 'script',
  95.             'id': 'autoRenderJs',
  96.             'src': 'https://cdn.staticfile.org/KaTeX/0.7.1/contrib/auto-render.min.js'
  97.         },
  98.         /*FLOWCHART*/
  99.         'flowchartJs': {
  100.             'type': 'script',
  101.             'id': 'flowchartJs',
  102.             'src': 'https://cdn.staticfile.org/flowchart/1.6.5/flowchart.min.js'
  103.         },
  104.         'raphaelJs': {
  105.             'type': 'script',
  106.             'id': 'raphaelJs',
  107.             'src': 'http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js'
  108.         },
  109.         /*MERMAID*/
  110.         'mermaidJs':{
  111.             'type':'script',
  112.             'id':'mermaidJs',
  113.             'src':'https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js'
  114.         },
  115.         /*SEQUENCEDIAGRAM*/
  116.         'webfont': {
  117.             'type': 'script',
  118.             'id': 'webfont',
  119.             'src': 'http://apps.bdimg.com/libs/webfont/1.3.0/webfont.js'
  120.         },
  121.         'snapSVG': {
  122.             'type': 'script',
  123.             'id': 'snapSVG',
  124.             'src': 'https://cdn.staticfile.org/snap.svg/0.5.1/snap.svg-min.js'
  125.         },
  126.         'underscore': {
  127.             'type': 'script',
  128.             'id': 'underscore',
  129.             'src': 'http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js'
  130.         },
  131.         'sqcDiagr': {
  132.             'type': 'script',
  133.             'id': 'sqcDiagr',
  134.             'src': 'https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js'
  135.         }
  136.     };
  137.     var optionsDefault = {
  138.         'breaks': false,
  139.         'gfm': true,
  140.         'pedantic': false,
  141.         'sanitize': false,
  142.         'smartLists': true,
  143.         'smartypants': false,
  144.         'tables': true,
  145.     };
  146.     var autoKatexOptDefault = {
  147.             'throwOnError': true,
  148.             'errorColor': '#f92672',
  149.             'macros': '',
  150.             'colorIsTextColor': false,
  151.             'maxSize': 500,
  152.             'ignoredTags': ["script", "noscript", "style", "textarea"],
  153.             'delimiters': [{
  154.                 left: "$$",
  155.                 right: "$$",
  156.                 display: true
  157.             }, {
  158.                 left: "\\[",
  159.                 right: "\\]",
  160.                 display: true
  161.             }, {
  162.                 left: "\\(",
  163.                 right: "\\)",
  164.                 display: true
  165.             }]
  166.         };
  167. /*  check/set GM_*Value  */
  168.     void function checkSetStorage(){
  169.         (GM_getValue('prismCT') === undefined) ? GM_setValue('prismCT', prismCT) : null;
  170.         (GM_getValue('docTheme') === undefined) ? GM_setValue('docTheme', docTheme) : null;
  171.         (GM_getValue('options') === undefined) ? GM_setValue('options', optionsDefault) : null;
  172.         (GM_getValue('curPismCodeTheme') === undefined) ? GM_setValue('curPismCodeTheme', 'solarized') : null;
  173.         (GM_getValue('curDocTheme') === undefined) ? GM_setValue('curDocTheme', 'github') : null;
  174.         (GM_getValue('addonState') === undefined) ? GM_setValue('addonState', addonDefaultState) : null;
  175.         (GM_getValue('emojiMode') === undefined) ? GM_setValue('emojiMode', 'shortnameToImage') : null;
  176.         (GM_getValue('autoKatexOpt') === undefined) ? GM_setValue('autoKatexOpt', autoKatexOptDefault) : null;
  177.     }();
  178. /*  check and set div#_html class #require docCodeStyle.js */
  179.     function _htmlClass() {
  180.         var a = GM_getValue('curDocTheme');
  181.         if (a === 'github' || a === 'github_dark') {
  182.             $('#_html').addClass('markdown-body');
  183.         } else {
  184.             $('#_html').addClass('markdown-theme');
  185.         }
  186.     }
  187. /*  addons : Add styleshtte/script to <head>    */
  188.     function addonPrepare(addonName){
  189.         addonRsc[addonName].forEach(function(curVal) {
  190.             if(!$('#'+curVal).length){
  191.                 if (resource[curVal].type === 'script') {
  192.                     $('head').append($('<script>', {
  193.                         id: resource[curVal].id,
  194.                         src: resource[curVal].src
  195.                     }));
  196.                 } else {
  197.                     $('head').append($('<link />', {
  198.                         id: resource[curVal].id,
  199.                         href: resource[curVal].href,
  200.                         rel: resource[curVal].rel
  201.                     }));
  202.                 }
  203.             }
  204.         });
  205.     }
  206. /*  change code style or document style */
  207.     function changeStyle(e) {
  208.         var a = e.target.dataset.type; //docTheme|prismCT
  209.         var b = e.target.dataset.theme; //themename
  210.         var tmp = GM_getValue(a);
  211.         $('#' + a).html(tmp[b]);
  212.         //changeElementStyle
  213.         a === 'docTheme' ? (GM_setValue('curDocTheme', b), _htmlClass()) : GM_setValue('curPismCodeTheme', b);
  214.         $(`#g legend[data-type=${a}`).each(function() {
  215.             this.dataset.using = false;
  216.         });
  217.         $(`#g legend[data-theme=${b}`).data('using', true);
  218.     }
  219. /*  parse according to options */
  220.     function changeOption(e) {
  221.         var a = e.target.dataset.opt;
  222.         var opt = GM_getValue('options');
  223.         opt[a] = !opt[a];
  224.         GM_setValue('options', opt);
  225.         var htmlTxt = marked($('#markdownText').val(), opt);
  226.         $('#_html').html(htmlTxt);
  227.         setTimeout(() => Prism.highlightAll(), 20);
  228.         //changeElementStyle
  229.         $(`#g legend[data-opt=${a}]`).data('using', opt[a]);
  230.     }
  231. /*  turn off/turn on addons  */
  232.     function toggleAddons(e){
  233.         var a = e.target.dataset.name;
  234.         $(e.target).toggleClass('adoff');
  235.         var b = GM_getValue('addonState');
  236.         b[a] = !b[a];
  237.         var c = b[a];
  238.         GM_setValue('addonState',b);
  239.         reflesh();
  240.         function reflesh(){
  241.             var renderer = new marked.Renderer();
  242.             var markedOptions = GM_getValue('options');
  243.             $('body script').remove();
  244.             $('#_html').html(marked($('#markdownText').val(),markedOptions));
  245.             checkRunAddons();
  246.             setTimeout(() => Prism.highlightAll(), 20);
  247.         }
  248.     }
  249. /*  parse text to emoji */
  250.     function useEmoji(){
  251.         addonPrepare('EMOJI');
  252.         function procEmoji(){
  253.             if (typeof(emojione) === 'object'){
  254.                 try {
  255.                          $('#_html').html( emojione.shortnameToImage($('#_html').html()) );
  256.                     } catch(e) {
  257.                         console.log(e);
  258.                     }
  259.                 } else{
  260.                     procENum += 1;
  261.                     console.log(procENum);
  262.                     if(procENum>10){
  263.                         console.log('Time out,please try to reflash !');
  264.                         return;
  265.                     }
  266.                     setTimeout(procEmoji, 100);
  267.  
  268.                 }
  269.         }
  270.         if($('#excEmoji').length){$('#excEmoji').remove()};
  271.         $('body').append($('<script>',{
  272.             id:'excEmoji',
  273.             text:`
  274.             var procENum = 0;
  275.             ${procEmoji.toString()};
  276.             setTimeout(procEmoji, 200);
  277.             `
  278.         }));
  279.     }
  280. /*  Use katex  */
  281.     function useKaTeX() {
  282.         addonPrepare('KATEX');
  283.        function trigOnKatex(){
  284.             $('code[class*=lang]').forEach(function(item){
  285.                 var language = item.className.slice(9);
  286.                 var code = $(item).text();
  287.                 if(language.match(/(katex|math)/i)!==null){
  288.                     var tmp = $(item).text();
  289.                     var num = item.parentNode.dataset.num;
  290.                     $(item).unwrap();
  291.                     $(item).replaceWith(`<div class='ktmath' data-num=${num}>\\[${(tmp.replace(/\n\W*\n/g,'\n\\]\\[\n'))}\\]</div>`);
  292.                  }
  293.             })
  294.             renderMathInElement($('#_html')[0], option);
  295.         }
  296.         function procKatexCode() {
  297.             if (typeof(katex) === 'object') {
  298.                 try {
  299.                     trigOnKatex();
  300.                 } catch(e) {
  301.                     console.log(e);
  302.                     procktNum += 1;
  303.                     if (procktNum > 15) {
  304.                         console.log('Use kaTeX Fail, try to Reflush! ');
  305.                         return;
  306.                     }
  307.                     setTimeout(procKatexCode,500);
  308.                 }
  309.             } else {
  310.                 procktNum += 1;
  311.                 if (procktNum > 10) {
  312.                     console.log('Use kaTeX Fail, try to Reflush! ');
  313.                     return;
  314.                 }
  315.                 setTimeout(procKatexCode,500);
  316.             }
  317.         }
  318.         if($('#excAutoRender').length){$('#excAutoRender').remove()}
  319.         $('body').append($('<script>', {
  320.             id: 'excAutoRender',
  321.             text: `
  322.                 var procktNum;
  323.                 var option = ${JSON.stringify(GM_getValue('autoKatexOpt'))};
  324.                 ${trigOnKatex.toString()}
  325.                 ${procKatexCode.toString()}
  326.                 setTimeout(procKatexCode, ${TIMESTEP});
  327.             `
  328.         }));
  329.     }
  330. /*  use flowchart  */
  331.     function useFlowchart() {
  332.         addonPrepare('FLOWCHART');
  333.  
  334.         function procFlowchartCode() {
  335.             if (typeof(flowchart) === 'object') {
  336.                 try {
  337.                     $('pre[class$=flow]').each(function(index) {
  338.                         var txt = $(this.firstElementChild).text();
  339.                         var a = $('<div>', {
  340.                             id: "fl" + index
  341.                         });
  342.                         $(this).append(a);
  343.                         flowchart.parse(txt).drawSVG(a[0]);
  344.                         $(this).replaceWith(a);
  345.                     });
  346.                 } catch(e) {
  347.                     procFcNum += 1;
  348.                     if (procFcNum > $('pre[class$=flow]').length+5){
  349.  
  350.                     console.log(e);
  351.                     console.log(`convert FlowChart falid! try to Reflush!\\n[Error]:` );
  352.                     return ;
  353.                 }
  354.                     setTimeout(procFlowchartCode, 500);
  355.                 }
  356.             } else {
  357.                 t1 = new Date();
  358.                 procFcNum += 1;
  359.                 if (procFcNum>10) {
  360.                     console.log(`convert FlowChart falid! try to Reflush!` );
  361.                     return;
  362.                 }
  363.             }
  364.         }
  365.         if($('#excflowchart').length) {$('#excflowchart').remove()};
  366.         $('body').append($('<script>', {
  367.             id: 'excflowchart',
  368.             text: `
  369.                 var procFcNum = 0;
  370.                 ${procFlowchartCode.toString()}
  371.                 setTimeout(procFlowchartCode, ${TIMESTEP});
  372.             `
  373.         }));
  374.     }
  375.  
  376. /*  use mermaid  flowchart|sequence diagram|gantt diagram  */
  377.     function useMermaid(opt){
  378.         addonPrepare('MERMAID');
  379.         addonPrepare('FONTAWESOME');
  380.         /*add class name mermaid*/
  381.         function trigOnMermaid(){
  382.             $('code[class*=lang]').forEach(function(item){
  383.                 var language = item.className.slice(9);
  384.                 var code = $(item).text();
  385.                 if(code.match(/(^gantt|^sequenceDiagram|^graph|^classDiagram)/)!==null){
  386.                     $(item).addClass('mermaid');
  387.                 }
  388.                 if(language.match(/gantt/)!==null){
  389.                     $(item).addClass('mermaid');
  390.                 }
  391.             })
  392.             mermaid.init();
  393.             setTimeout(function(){
  394.                 $('.mermaid svg').unwrap().unwrap().wrap('<div class="mermaidDiv"></div>');
  395.             },200);
  396.         }
  397.  
  398.         function excMermaid(){
  399.             if(typeof(mermaid) !== 'undefined'){
  400.                 try {
  401.                     trigOnMermaid();
  402.                 } catch(e) {
  403.                     excMmNum += 1;
  404.                     if(excMmNum > 15){
  405.                         console.log('Use Mermaid Failed ! try to reflush !');
  406.                         return;
  407.                     }
  408.                     console.log(e);
  409.                 }
  410.             } else{
  411.                 excMmNum += 1;
  412.                 if(excMmNum > 10){
  413.                     console.log('Use Mermaid Failed ! try to reflush !');
  414.                     return;
  415.                 }
  416.                 setTimeout(excMermaid, 500);
  417.             }
  418.         }
  419.         // if($('#excMermaid').length){
  420.         //     $('#excMermaid').remove();
  421.         // }
  422.         $('#_html').append($('<script>',{
  423.             id:'excMermaid',
  424.             text:`
  425.             var excMmNum = 0;
  426.             ${excMermaid.toString()};
  427.             ${trigOnMermaid.toString()};
  428.             setTimeout(excMermaid, 10);
  429.             `
  430.         }));
  431.     }
  432.  
  433. /*  use sequence diagram  */
  434.     function useSeqcDiagram() {
  435.         addonPrepare('SEQUENCEDIAGRAM');
  436.  
  437.         function procSeqcdiagram() {
  438.             if (typeof(Diagram) === 'function' || typeof(Diagram) === 'object') {
  439.                 clearInterval(timerSd);
  440.                 $('pre[class$=seq]').each(function(index) {
  441.                     try {
  442.                         var a = $('<div>',{id:'seq'+index})[0];
  443.                         var b = Diagram.parse($(this.firstElementChild).text());
  444.                         $(this).replaceWith(a);
  445.                         b.drawSVG(a);
  446.                         // $(this).replaceWith(a);
  447.                     } catch(e) {
  448.                         console.log(e);
  449.                     }
  450.                 });
  451.             } else {
  452.                 t1 = new Date();
  453.                 if ((t1 - t) > 10000) {
  454.                     clearInterval(timerSd);
  455.                     console.log('Use sequence-diagrams Fail, try to Reflush! ');
  456.                 }
  457.             }
  458.         }
  459.         if($('#excAutoRender').length){$('#excAutoRender').remove()};
  460.         $('body').append($('<script>', {
  461.             id: 'excAutoRender',
  462.             text: `
  463.                 var t = new Date(),t1;
  464.                 ${procSeqcdiagram.toString()}
  465.                 timerSd = setInterval(procSeqcdiagram, ${TIMESTEP});
  466.             `
  467.         }));
  468.     }
  469.  
  470.  
  471. /*  set marked.options.renderer  */
  472.     function setRenderer(){
  473.         var renderer = new marked.Renderer();
  474.         window.codenum = 0;
  475.         renderer.code = function(code, language) {
  476.             return `<pre class="language-${language}"><code class="language-${language}">${code}</code></pre>`;
  477.         };
  478.         return renderer;
  479.     }
  480.  
  481.  
  482. /*  Add <link rel='stylesheet'> <script src='*'> element */
  483.     $('head').append($('<script>',{id:'zeptojs',src:'https://cdn.staticfile.org/zepto/1.2.0/zepto.min.js'}));
  484.     $('head').append($('<style>', {
  485.         id: docStyleElementId,
  486.         text: docTheme[GM_getValue('curDocTheme')]
  487.     }));
  488.     $('head').append($('<style>', {
  489.         id: codeStyleElementId,
  490.         text: prismCT[GM_getValue('curPismCodeTheme')]
  491.     }));
  492. //
  493.  
  494.     /* storage the raw-markdown text */
  495.     var mdSource = $('body').text();
  496.     var mdSourceNode = $('<textarea style="display:none !important;" id="markdownText">').val(mdSource);
  497.     /* load marked options */
  498.     var markedOptions = GM_getValue('options');
  499.     // markedOptions.renderer = setRenderer();
  500.     /*  empty <body>  */
  501.     $('body').empty();
  502.     /* transfer codes, set container, replace Markdown code, add stylesheet */
  503.     var htmlTxt = marked(mdSource,markedOptions);
  504.     $('body').append($('<div>',{id:'_html'}));
  505.     $('#_html').html(htmlTxt);
  506.     $('pre[data-language]').hide();
  507.     _htmlClass();
  508. //
  509.     function checkRunAddons(){
  510.         GM_getValue('addonState')['FLOWCHART'] ? useFlowchart() : null;
  511.         GM_getValue('addonState')['KATEX'] ? useKaTeX() : null;
  512.         GM_getValue('addonState')['SEQUENCEDIAGRAM'] ? useSeqcDiagram() : null;
  513.         /* parse to emoji  */
  514.         GM_getValue('addonState')['EMOJI'] ? useEmoji() : null;
  515.         GM_getValue('addonState')['MERMAID'] ? useMermaid() : null;
  516.     }
  517.     checkRunAddons();
  518.  
  519.  
  520.  
  521.     /*  highlight code block  */
  522.     setTimeout(() => Prism.highlightAll(), 20);
  523.     /*append mdSourceNode*/
  524.     $('body').append(mdSourceNode);
  525. //  stylesheet
  526.     /* global Css & Settings Css*/
  527.     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,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) 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;}/*mermaid svg begin*/.mermaidDiv{background:white;border-radius:10px;} .mermaidDiv svg{height:auto;}/*mermaid svg end*/
  528.  
  529.     #setting {cursor:pointer;font-size:25px!important;min-width:35px;max-width:35px;padding:0 3px 5px 3px;min-height:35px;max-height:35px;text-align:center;color:cyan;background:#222;position:fixed;right:10px;top:10px;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30);border:2px solid cyan;border-radius:30px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
  530.     #setting:hover {opacity:1;-moz-opacity:1;filter:alpha(opacity=100);transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}
  531.     /*setting menu css */
  532.     #g{display:none;position: fixed; top:20px;right:20px;width:125px;height:auto;list-style-type: none;}
  533.     #g *{color:#2196F3;font-size:16px;text-align:center;}
  534.     #g legend{display:block;text-align:center;background:#333;height:35px;border:0;padding:5px;margin:0;}
  535.     #g li:hover, #g legend:hover{background:yellowgreen;color:white!important;font-weight:bold!important;}
  536.     #g li{width:130px;right:0;background:#333;padding: 3px 5px;}
  537.     #g fieldset {position:absolute;right:120px;top:0;width:320px;min-height:252px;margin:0;border:0;padding:0;border-radius:10px;display:none;}
  538.     #g li:hover fieldset{display:block;}
  539.     #g legend{background:#444;width:150px;float:right;border-radius:5px;}
  540.     #g li:first-of-type{border-radius:10px 10px 0 0;}
  541.     #g li:last-of-type{border-radius:0 0 10px 10px;}
  542.     #g>li>span{width:100%;display: block;height:30px;}
  543.     #g>li:hover>span{display: block;right:100px;color:white;}
  544.     /*#s>label>fieldset:hover>label{display: block;}*/
  545.     .adoff {text-align:right!important;color:#FFEB3B!important;border-left:20px solid #FFEB3B !important;width:110px !important;}
  546.     .adoff fieldset{display:none!important;}
  547.     .using{background:yellowgreen;}
  548.     legend[data-using="true"]{background:yellowgreen!important;}
  549.             `);
  550. //
  551. /*  Seting button */
  552.     function gear() {
  553.         var j = GM_getValue('options');
  554.         var k = GM_getValue('autoKatexOpt');
  555.         var a = $('<div>')[0];
  556.         a.name = 'gear';
  557.         a.setAttribute('style', 'styleCss');
  558.         var tmp = `<ul id='g'><li><span>Doc Theme</span><fieldset>`;
  559.         for (var i in docTheme) {
  560.             tmp += `<legend data-theme='${i}'data-type='docTheme' data-using=${i == GM_getValue('curDocTheme')}>${i}</legend>`;
  561.         }
  562.         tmp += `</fieldset></li><li><span>Code Theme</span><fieldset>`;
  563.         for (var i in prismCT) {
  564.             tmp += `<legend data-theme='${i}'data-type='prismCT' data-using=${i == GM_getValue('curPismCodeTheme')}>${i}</legend>`;
  565.         }
  566.         tmp += `</fieldset></li><li><span>Options</span><fieldset>`;
  567.         for (var i in j) {
  568.             tmp += `<legend data-opt='${i}'data-type='options' data-using='${j[i]}'>${i}</legend>`;
  569.         }
  570.         tmp += `</fieldset></li><li><span data-name='EMOJI' class='${GM_getValue('addonState')['EMOJI']?'adon':'adoff'}'>Emoji</span></li>`;
  571.         tmp += `<li><span data-name='KATEX' class='${GM_getValue('addonState')['KATEX']?'adon':'adoff'}'>KaTeX</span><fieldset>`;
  572.  
  573.         for (var i in k) {
  574.             tmp += `<legend data-opt='${k}'data-type='autoKatexOpt' data-using='${k[i]}'>${i}</legend>`;
  575.         }
  576.         tmp += `</fieldset></li><li><span data-name='FLOWCHART' class='${GM_getValue('addonState')['FLOWCHART']?'adon':'adoff'}'>FlowChar</span></li>`;
  577.         tmp += `<li><span data-name='SEQUENCEDIAGRAM' class='${GM_getValue('addonState')['SEQUENCEDIAGRAM']?'adon':'adoff'}'>Seqc Digrm</span></li>`;
  578.  
  579.         tmp += `<li><span data-name='MERMAID' class='${GM_getValue('addonState')['MERMAID']?'adon':'adoff'}'>Mermaid</span></li>`;
  580.  
  581.         tmp += `</ul></div><div id='setting'onclick="$('#g').toggle()">▞</div>`;
  582.  
  583.         a.innerHTML = tmp;
  584.         $('body').append(a);
  585.     }
  586.     gear();
  587.     $('#g legend[data-theme]').each(function() {
  588.         this.addEventListener('click', changeStyle, false);
  589.     });
  590.  
  591.     $('#g legend[data-opt]').each(function() {
  592.         this.addEventListener('click', changeOption, false);
  593.     });
  594.     $('#g span[data-name]').each(function() {
  595.         this.addEventListener('click', toggleAddons, false);
  596.     });
  597.     $('legend[data-using="true"]').addClass('using');
  598.  
  599.  
  600.  
  601. })();