AcWing美化

美化AcWing界面

Version au 01/05/2023. Voir la dernière version.

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==UserScript==
// @name         AcWing美化
// @version      1
// @description  美化AcWing界面
// @author       北极小狐
// @match        https://www.acwing.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=acwing.com
// @grant        none
// @run-at       document-start
// @require      https://cdn.bootcdn.net/ajax/libs/turndown/7.1.1/turndown.min.js
// @license      MIT
// @namespace    https://greatest.deepsurf.us/users/747162
// ==/UserScript==

// 调整样式
function loadCssCode(code){
    var style = document.createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    style.appendChild(document.createTextNode(code));
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}
loadCssCode(`
/* 宽度自适应 */
.container {
    width: auto !important;
}
/* 去除没用的图标 */
.file-explorer-main-field-item.file-explorer-main-field-item-desktop {
    width: 0px;
    height: 0px;
    overflow: hidden;
}
/* 背景bing壁纸 */
#acwing_body {
    background: white url(https://bingw.jasonzeng.dev) fixed !important;
}
/* 其他 */
.fs-gui-taskbar {
    height: 3.5vh !important;
    background-color: #dde1e5  !important;
}
.fs-gui-taskbar-widgets-apps-item > img {
    height: 2.2vh !important;
    width: 2.2vh !important;
    margin: 0.5vh 0.5vh 0.5vh 0.5vh !important;
}
.fs-gui-taskbar-widgets-clock{
    width: 0px  !important;
    height: 0px  !important;
    overflow: hidden  !important;
}
.fs-gui-taskbar-widgets-apps-item {
    margin-right: 2vh !important;
}
#fs-gui-taskbar-search-field {
    font-size: 1.3vh !important;
}
.fs-gui-taskbar-search-icon {
    font-size: 1.6vh !important;
    top: 0.95vh !important;
    left: 4.3vh !important;
}
footer#acwing_footer .copyright {
    color: #fff;
}
footer#acwing_footer .copyright a, .links a, footer#acwing_footer .container {
    color: #fff;
}
.fs-gui-taskbar-begin {
    height: 3vh !important;
    width: 3vh !important;
    margin: 0.2vh !important;
    border-radius: 60%;
    background-color: #fffefe80 !important;
}
button.fs-gui-taskbar-begin.pull-left.btn.btn-default img {
    width: 83% !important;
}
#fs-gui-taskbar-search-field {
    height: 90% !important;
    margin: 0.15vh;
    border-radius: 100px;
    border-width: 0.2vh;
    border-style: solid;
    border-color: #c7d2dd;
}
#fs-gui-taskbar-search-field:focus-visible {
    border-width: 0.2vh;
    border-style: solid;
    border-color: #8bb2d9;
    outline: -webkit-focus-ring-color auto 0px;
}

/* 复制按钮 */
pre.hljs {
    display: flex;
    justify-content: space-between;
}
span.copy-button {
    cursor: pointer;
    background-color: #e6e6e6;
    color: #727378;
    height: 2vh;
    font-size: 1.3vh;
    border-radius: 0.3rem;
    padding: 1px 5px;
    margin: 5px;
    box-shadow: 0 0 1px #0000004d;
}
span.copy-button.copied {
    background-color: #07e65196;
    color: #104f2b;
}
/* html2md */
.html2md-panel {
    display: flex;
    justify-content: flex-end;
}
button.html2mdButton {
    height: 3vh;
    width: 3vh;
}
button.html2mdButton {
    cursor: pointer;
    background-color: #e6e6e6;
    color: #727378;
    height: 3vh;
    width: auto;
    font-size: 1.3vh;
    border-radius: 0.3rem;
    border: none;
    padding: 1px 5px;
    margin: 5px;
    box-shadow: 0 0 1px #0000004d;
}
button.html2mdButton.copied {
    background-color: #07e65196;
    color: #104f2b;
}
button.html2mdButton.html2md-view.mdViewed {
    background-color: #ff980057;
    color: #5a3a0c;
}
/* 打卡框 */
.ui.bottom.attached.tab.segment.active {
    padding: 0px;
}
`);

// 添加复制按钮
function addCopy(){
    // 获取所有 .hljs 中的代码块
    const codeBlocks = document.querySelectorAll('.hljs code');

    // 循环遍历每个代码块
    codeBlocks.forEach(codeBlock => {
        // 创建一个 span 元素,并设置样式
        const beforeButton = document.createElement('span');
        beforeButton.textContent = "Copy";
        beforeButton.className = 'copy-button';
        // 在代码块前面插入按钮
        codeBlock.parentNode.insertBefore(beforeButton, codeBlock.nextSibling);
        // 为按钮添加点击事件
        beforeButton.addEventListener('click', event => {
            // 创建临时文本域
            const textarea = document.createElement('textarea');
            textarea.value = codeBlock.textContent.replace(/\n+$/, '');
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);


            // 更新复制按钮文本
            beforeButton.classList.add('copied');
            beforeButton.textContent = "Copied";
            setTimeout(() => {
                beforeButton.classList.remove('copied');
                beforeButton.textContent = "Copy";
            }, 2000);
        }, false);
    });
}

// 移除复制按钮
function removeCopy(){
    var elements = document.querySelectorAll('.hljs .copy-button');
    for (var i = 0; i < elements.length; i++) {
        elements[i].parentNode.removeChild(elements[i]);
    }

}

document.addEventListener('DOMContentLoaded', function() {
    // 让某些链接在新窗口打开
    var regExps = [
        /常用代码模板/,
        /example/,
        /test/
    ];
    var aTags = document.getElementsByTagName('a');
    for (var i = 0; i < aTags.length; i++) {
        for (var j = 0; j < regExps.length; j++) {
            if (regExps[j].test(aTags[i].textContent)) {
                aTags[i].setAttribute('target', '_blank');
                break;
            }
        }
    }
    // 自动恢复进度条
    setTimeout(function() {
        try {
            document.querySelector('.play-jump').click();
        } catch (error) {
            // do nothing
        }
    }, 3000);
    // 复制按钮
    addCopy();
    // 移除广告元素
    let ADidADList = ["1024-activity","test"];
    ADtraverseDom(document.body);
    function ADtraverseDom(node) {
        if (node.nodeType === Node.ELEMENT_NODE && ADidADList.includes(node.id)) {
            node.parentNode.removeChild(node);
        } else {
            for (let i = 0; i < node.childNodes.length; i++) {
                ADtraverseDom(node.childNodes[i]);
            }
        }
    }
    // 修改打卡页代码框默认高度
    var element = document.getElementById("martor-content");
    if(element){
        var style = window.getComputedStyle(element);
        element.style.height = "55vh";
    }
});

// MarkDown

document.addEventListener('DOMContentLoaded', function() {
    let debug = false; // whether to enable on editor

    let turndownService = new TurndownService();

    turndownService.keep(['del']);

    // code block
    turndownService.addRule('pre', {
        filter: 'pre',
        replacement: function (content, node) {
            let t = $(node).attr("class").split(/\s+/).slice(-1);
            if (t == "hljs") t = "";
            return "```" + t + "\n" + content.trim() + "\n```";
        }
    });

    // remove <script> math
    turndownService.addRule('remove-script', {
        filter: function (node, options) {
            return node.tagName.toLowerCase() == "script" && node.type.startsWith("math/tex");
        },
        replacement: function (content, node) {
            return "";
        }
    });

    // inline math
    turndownService.addRule('inline-math', {
        filter: function (node, options) {
            return node.tagName.toLowerCase() == "span" && node.className == "MathJax";
        },
        replacement: function (content, node) {
            return "$ " + $(node).next().text() + " $";
        }
    });

    // block math
    turndownService.addRule('block-math', {
        filter: function (node, options) {
            return node.tagName.toLowerCase() == "div" && node.className == "MathJax_Display";
        },
        replacement: function (content, node) {
            return "\n$$\n" + $(node).next().text() + "\n$$\n";
        }
    });

    // add buttons
    $("div[data-tab='preview-tab-content']").each(function() {
        if (debug || $(this).prev().attr('data-tab') != "editor-tab-content")
            $(this).before(
                "<div class='html2md-panel'> <button class='html2mdButton html2md-view'>MarkDown视图</button> <button class='html2mdButton html2md-cb'>Copy</button> </div>"
            );
    });

    $(".html2md-cb").click(function() {
        let target = $(this).parent().next().get(0);
        if (!target.markdown){
            removeCopy();
            target.markdown = turndownService.turndown($(target).html());
            addCopy();
        }
        const textarea = document.createElement('textarea');
        textarea.value = target.markdown;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        // console.log(markdown);
        $(this).addClass("copied");
        $(this).text("Copied");
        // 更新复制按钮文本
        setTimeout(() => {
            $(this).removeClass("copied");
            $(this).text("Copy");
        }, 2000);
    });

    $(".html2md-view").click(function() {
        let target = $(this).parent().next().get(0);
        if (target.viewmd) {
            target.viewmd = false;
            $(this).text("MarkDown视图");
            $(this).removeClass("mdViewed");
            $(target).html(target.original_html);
            addCopy();
        } else {
            target.viewmd = true;
            removeCopy();
            if (!target.original_html)
                target.original_html = $(target).html();
            if (!target.markdown)
                target.markdown = turndownService.turndown($(target).html());
            $(this).text("原始内容");
            $(this).addClass("mdViewed");
            $(target).html(`<span oninput="$(this).parent().get(0).markdown=this.value;" style="width:auto; height:auto; white-space: pre;"> ${target.markdown} </span>`);
        }
    });
});