分享 1130 0

    使用prism.js代码高亮

    >实现代码块高亮显示效果
    head加入
    ```html


    ```
    footer加入
    ```html

    ```

    美化 mac 风格

    在js中加入

    ```
    var container = document.getElementsByTagName('main')[0];
    var codeBlocks = container.getElementsByTagName('pre');
    Array.from(codeBlocks).forEach(function(item) {
    item.style.whiteSpace = 'pre-wrap';
    // Add pre-mac element for Mac Style UI
    var preMac = document.createElement('div');
    preMac.classList.add('pre-mac');
    preMac.innerHTML = '';
    item.parentNode.insertBefore(preMac, item);
    item.classList.add('line-numbers');
    });

    ```
    css
    ```
    .pre-mac {
    position: relative;
    margin-top: -7px;
    top: 21px;
    left: 10px;
    width: 100px;
    z-index: 99;
    }
    .pre-mac > span {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    }
    .pre-mac > span:nth-child(1) {
    background: red;
    }
    .pre-mac > span:nth-child(2) {
    background: sandybrown;
    }
    .pre-mac > span:nth-child(3) {
    background: limegreen;
    }
    ```