为 MDx 适配 Mac 风格的代码高亮

基于Carbon的设计

样例

#include <stdio.h>
int main()
{
    printf( "Hello World !" );
    return(0);
}

用法

在页面中引入

$(document).ready(function () {
    if (typeof (hljs) == "undefined") {
        return;
    }
    jQuery.getScript('highlightjs-line-numbers.min.js?ver=2.8.0', loadClipboard)

});

function loadClipboard() {
    jQuery.getScript('clipboard.min.js?ver=2.0.6', renderCustomHighlight)
}

function renderCustomHighlight() {
    hljs.initLineNumbersOnLoad();
    $('code.hljs').each(function (i, block) {
        hljs.lineNumbersBlock(block);
    });
    $('pre.hljs').append(`<div class="mdui-btn-group controlcode">
    <button type="button" class="mdui-btn mdui-text-color-white-icon copybutton" mdui-tooltip="{content: '复制'}"><i class="mdui-icon material-icons cticon">flip_to_front</i></button>
  </div>`)
    var pre = document.getElementsByTagName('pre');
    var pasteContent = document.getElementById('paste-content');

    // Add a copy button in the 'pre' element.
    // which only has the className of 'language-'.
    var hasLanguage = false;

    for (var i = 0; i < pre.length; i++) {
        var codeClass = pre[i].children[0].className;
        var isLanguage = codeClass.indexOf('language-');

        var excludedCodeClassNames = [
            'language-katex',
            'language-seq',
            'language-sequence',
            'language-flow',
            'language-flowchart',
            'language-mermaid',
        ];

        var isExcluded = excludedCodeClassNames.indexOf(codeClass);

        if (isExcluded !== -1) {
            isLanguage = -1;
        }

        if (isLanguage !== -1) {
            hasLanguage = true;
        }
    };

    // Run Clipboard
    if (hasLanguage) {
        var copyCode = new ClipboardJS('.copybutton', {
            target: function (trigger) {
                return trigger.parentNode.previousElementSibling;
            }
        });

        // On success:
        // - Change the "Copy" text to "Copied".
        // - Swap it to "Copy" in 2s.

        copyCode.on('success', function (event) {
            event.clearSelection();
            mdui.snackbar({
                message: '复制成功'
            });
        });
    }
}

.hljs-ln-line {
    padding-right:12px!important;
}
table {
    margin-bottom:0!important;
}
pre.hljs {
    padding:58px 20px 12px 20px;
    position:relative;
    line-break:anywhere;
    white-space:break-spaces;
}
pre.hljs:before {
    content:"";
    position:absolute;
    background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat;
    background-position-y:center;
    top:22px;
    left:12px;
    height:14px;
    width:54px;
    margin-left:5px;
    display:block;
}
div.controlcode {
    position: absolute;
    top: 16px;
    right: 20px;
    user-select: none;
    opacity: 0.8;
    transition: all .2s ease;
    white-space: nowrap;
    z-index: 3000;
}

.cticon{
    font-size: 20px!important;
}

@font-face {
    font-family:'Hack';
    font-display:swap;
    src:url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020') format('woff2'),url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020') format('woff');
    font-weight:400;
    font-style:normal;
}
pre > code {
    font-family:Hack,consolas,sans-serif,monospace !important;
}
.copybutton {
    padding: 0px!important;
}

注意

需要配合安装WP-Githuber-MD并开启Highlight.js模块