☰

Markdown Viewer Lite

view Markdown in Chrome,23 common language surportted

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