MJ老师博客园的美化代码

背景

逛MJ老师的博客,发现他的博客对代码高亮支持比较漂亮,于是乎拿来主义~

1. 选择darkgreentrip这个模板
2. 将以下代码放到页脚即可

代码

   <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/wgb1234/mj.css">
<script src="https://files.cnblogs.com/files/wgb1234/mjhighlight.js"></script>
<script src="https://files.cnblogs.com/files/wgb1234/mjclipboard.min.js"></script>
<script>
var $postBody = null;
$(function() {
    $postBody = $('#cnblogs_post_body');

    remove();
    backToTop();
    rank();
    links();

    if ($postBody.length === 0) return

    edit();
    sideBar();
    addDirs();
    moveToc();
    followMJ();
    markdown();
});



function links() {
    $postBody.find('a').each(function() {
        var $a = $(this);
        let link = $a.attr('href')
        if (!link || link.indexOf('#') === 0) return;
        $a.attr("target", "_blank");
    });
}

function edit() {
    var $topics = $('#topics');
    var $desc = $topics.find('.postDesc');
    $topics.prepend($desc);

    // 删除用户名
    $desc.find('a:first-of-type').remove();

    // 所有的链接
    var $as = $desc.find('a');
    $as.remove();

    var $newParent = $('<span class="count-text">' + $desc[0].innerHTML + '</span>');
    $newParent.click(function() {
        scrollTo($('#blog-comments-placeholder').offset().top);
    });

    $desc.empty();
    $desc.append($newParent).append($as);
}

function sideBar() {
    const space = '270px'
    $('#mainContent').css('float', 'none').css('margin-left', '0');
    $('#mainContent .forFlow')
    .css('margin-left', space).css('margin-right', '0');
    $('#sideBar').css('margin-top', '15px').css('width', '100%');
    $('#sideBarMain').css('padding-left', space);
}

function rank() {
    var $rank = $('#sidebar_scorerank');
    var $column = $('#blog-sidecolumn');
    if ($rank.length === 0) {
        setTimeout(rank, 100);
        return;
    }
    $column.prepend($rank);
}

function markdown() {
    if ($postBody.find('.hljs').length === 0) return;
    $postBody.addClass('cnblogs-markdown');
    // if (!$postBody.hasClass('cnblogs-markdown')) return;

    addCodeTopBar();
    showCodeLineNumber();
}

function addDirs() {
    if ($postBody.length === 0) return;

    var $toc = $('<div class="toc"></div>');   
    var $tocList = $('<div class="toc-list"></div>').appendTo($toc);

    var $h2List = null;
    var $h2 = null;
    var $h3List = null;
    var $h3 = null;
    var $h4List = null;
    var titleIndex = 0;
    $postBody.children().each(function() {
        if (this.tagName !== 'H2'
            && this.tagName !== 'H3'
            && this.tagName !== 'H4') return;
        var $title = $(this);
        var id = 'toc_title_' + (titleIndex++);
        $title.attr('id', id);
        var $li = $('<li><a href="#' + id + '">' + $title.text() + '</a></li>');

        if (this.tagName === 'H2') {
            $h2 = $li;
            $h3List = null;
            if (!$h2List) {
                $h2List = $('<ul></ul>').appendTo($tocList);
            }
            $h2List.append($h2);
        } else if ($('.cnblogs-markdown').length > 0) {
            if (this.tagName === 'H3') {
                $h3 = $li;
                $h4List = null;
                if (!$h3List) {
                    $h3List = $('<ul></ul>').appendTo($h2);
                }
                $h3List.append($h3);
            } else if (this.tagName === 'H4') {
                var $h4 = $li;
                if (!$h4List) {
                    $h4List = $('<ul></ul>').appendTo($h3);
                }
                $h4List.append($h4);
            }
        }   
    });

    if (!$h2List) return;
    $postBody.prepend('<hr>').prepend($toc);
}

function backToTop() {
    var $node = $('<div id="back-top">'
        + '<img src="https://images.cnblogs.com/cnblogs_com/mjios/1435446/o_above_arrow.png">'
        + '<div>顶部</div>'
        + '</div>');
    $node.appendTo($(document.body));
    $node.click(function() {
        scrollTo(0);
    });
}

function remove() {
    // 删除posted @ 
    var fn = function() {
        var desc = $(this);
        var html = desc.html();
        desc.html(html.replace(/posted @/g, ''));
    };
    $('.entrylistItemPostDesc').each(fn);
    $('.postDesc').each(fn);

    // 删除M了个J
    $('.PostList .postDesc2').each(function() {
        var $desc = $(this);
        var html = $desc.html();
        $desc.html(html.replace(/CoderWGB/g, ''));
    });
}

function small() {
    return $(document).width() <= 767;
}

function scrollTo(top) {
    $('html, body').animate({scrollTop: top}, 200);
}

function moveToc() {
    var $toc = $postBody.find('.toc');
    if ($toc.length === 0) return;

    // 添加事件处理
    $toc.find('li a').each(function() {
        var $a = $(this);
        $a.click(function() {
            scrollTo($($a.attr('href')).offset().top);
        });
    });

    // 新的父节点
    var $parent = $('<div id="toc-box">' 
        + '<h3 class="catListTitle">本文目录</h3>' 
        + '</div>');
    $parent.append($toc.clone(true));
    $parent.prependTo($(document.body));

    // 监听滚动
    $(window).scroll(function() {  
        var top = $('#header').height() - $(document).scrollTop();
        if (top <= 1) {
            $parent.css('position', 'fixed');
            $parent.css('top', '0');
        } else {
            $parent.css('position', 'absolute');
            $parent.css('top', '137px');
        }
    });  
}

/**
* 关注MJ
*/
function followMJ(){
    if ($("#div_digg").length === 0){
        setTimeout(followMJ, 100); 
        return;
    }

    $("<div></div>")
        .append(
            $("#green_channel_follow")
            .clone(true)
            .text("关注 CoderWGB")
            .attr("id", "followMJ")
            )
        .prependTo("#div_digg");
}

/**
* 添加代码顶部工具条
*/
function addCodeTopBar() {
    /* 编程语言 */
    var languages = {
        "html": "HTML",
        "xml": "XML",
        "svg": "SVG",
        "mathml": "MathML",
        "css": "CSS",
        "clike": "C-like",
        "java": "Java",
        "js": "JavaScript",
        "abap": "ABAP",
        "apacheconf": "Apache Configuration",
        "apl": "APL",
        "arff": "ARFF",
        "asciidoc": "AsciiDoc",
        "adoc": "AsciiDoc",
        "asm6502": "6502 Assembly",
        "aspnet": "ASP.NET (C#)",
        "autohotkey": "AutoHotkey",
        "autoit": "AutoIt",
        "shell": "Bash",
        "basic": "BASIC",
        "csharp": "C#",
        "dotnet": "C#",
        "cpp": "C++",
        "cil": "CIL",
        "csp": "Content-Security-Policy",
        "css-extras": "CSS Extras",
        "django": "Django/Jinja2",
        "jinja2": "Django/Jinja2",
        "dockerfile": "Docker",
        "erb": "ERB",
        "fsharp": "F#",
        "gcode": "G-code",
        "gedcom": "GEDCOM",
        "glsl": "GLSL",
        "gml": "GameMaker Language",
        "gamemakerlanguage": "GameMaker Language",
        "graphql": "GraphQL",
        "hcl": "HCL",
        "http": "HTTP",
        "hpkp": "HTTP Public-Key-Pins",
        "hsts": "HTTP Strict-Transport-Security",
        "ichigojam": "IchigoJam",
        "inform7": "Inform 7",
        "javastacktrace": "Java stack trace",
        "json": "JSON",
        "jsonp": "JSONP",
        "latex": "LaTeX",
        "emacs": "Lisp",
        "elisp": "Lisp",
        "emacs-lisp": "Lisp",
        "lolcode": "LOLCODE",
        "markup-templating": "Markup templating",
        "matlab": "MATLAB",
        "mel": "MEL",
        "n1ql": "N1QL",
        "n4js": "N4JS",
        "n4jsd": "N4JS",
        "nand2tetris-hdl": "Nand To Tetris HDL",
        "nasm": "NASM",
        "nginx": "nginx",
        "nsis": "NSIS",
        "objectivec": "Objective-C",
        "ocaml": "OCaml",
        "opencl": "OpenCL",
        "parigp": "PARI/GP",
        "objectpascal": "Object Pascal",
        "php": "PHP",
        "php-extras": "PHP Extras",
        "plsql": "PL/SQL",
        "powershell": "PowerShell",
        "properties": ".properties",
        "protobuf": "Protocol Buffers",
        "q": "Q (kdb+ database)",
        "jsx": "React JSX",
        "tsx": "React TSX",
        "renpy": "Ren'py",
        "rest": "reST (reStructuredText)",
        "sas": "SAS",
        "sass": "Sass (Sass)",
        "scss": "Sass (Scss)",
        "sql": "SQL",
        "soy": "Soy (Closure Template)",
        "swift": "Swift",
        "tap": "TAP",
        "toml": "TOML",
        "tt2": "Template Toolkit 2",
        "ts": "TypeScript",
        "vbnet": "VB.Net",
        "vhdl": "VHDL",
        "vim": "vim",
        "visual-basic": "Visual Basic",
        "vb": "Visual Basic",
        "wasm": "WebAssembly",
        "wiki": "Wiki markup",
        "xeoracube": "XeoraCube",
        "xojo": "Xojo (REALbasic)",
        "xquery": "XQuery",
        "yaml": "YAML"
    };

    var no = 0;
    doCodePre(function() {
        no++;

        var $pre = $(this);
        /* 顶部工具条 */
        var $top = $('<div class="code-top"></div>');
        $pre.prepend($top); 

        /* 复制代码 */
        var copyId = "copy-target-" + no;
        $pre.find('code').attr('id', copyId);
        $top.append('<div class="copy-code" data-clipboard-target="#'
            + copyId +
            '">复制代码</div>');

        var clz = $pre.find('code')[0].className;
        clz = clz.replace('hljs', '').replace('language-', '').trim().toLowerCase()
        var language = languages[clz] || clz.toUpperCase();
        console.log($pre[0].className)
        $top.append('<div class="code-language">' + language + '</div>');
    });
    

    /* 复制代码 */
    var clipboard = new ClipboardJS('.copy-code');
    clipboard.on('success', function(e) {
        // console.info('Trigger:', e.trigger);
    });

    clipboard.on('error', function(e) {
        // console.error('Trigger:', e.trigger);
    });
}

/**
* 显示代码行号
*/
function showCodeLineNumber() {
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
}

function doCodePre(fn) {
    var $pre = $postBody.find("pre");
    if ($pre.find('.hljs').length <= 0) return;
    $pre.each(fn);
}
</script>

<div id="back-top"><img src="https://images.cnblogs.com/cnblogs_com/mjios/1435446/o_above_arrow.png"><div>顶部</div></div>