yangrz-highlight.line-numbers.js
/
demo.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>line nubmers demo</title>
    <link rel="alternate stylesheet" title="Default" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
    <link rel="alternate stylesheet" title="Dracula" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/darcula.min.css">
    <link rel="stylesheet" title="Ir Black" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/ir-black.min.css">
    <link rel="alternate stylesheet" title="Vs" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/vs.min.css">
    <style type="text/css">
        body {
            background: #fff;
        }

        .container {
            width: 650px;
            margin: 0 auto;
        }

        .code-style {
            margin-bottom: 50px;
        }

        .code-style button {
            padding: 3px 10px;
            border: 1px solid #ccc;
        }

        .code-style button.current {
            background: #3886fe;
            border-color: #3886fe;
            color: #fff;
        }

        .code-demo {
            margin-bottom: 50px;
        }

        pre {
            position: relative;
        }

        .hljsln {
            display: block;
            margin-left: 2.4em;
            padding-left: 0.7em !important;
        }

        .hljsln::-webkit-scrollbar {
            height: 15px;
        }

        .hljsln::-webkit-scrollbar-thumb {
            background: #666;
        }

        .hljsln::-webkit-scrollbar-thumb:hover {
            background: #797979;
        }

        .hljsln::-webkit-scrollbar-thumb:active {
            background: #949494;
        }

        .hljsln .ln-bg {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 2.4em;
            height: 100%;
            background: #333;
        }

        .hljsln .ln-num {
            position: absolute;
            z-index: 2;
            left: 0;
            width: 2.4em;
            height: 1em;
            text-align: center;
            display: inline-block;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .hljsln .ln-num::before {
            color: #777;
            font-style: normal;
            font-weight: normal;
            content: attr(data-num);
        }

        .hljsln .ln-eof {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="code-style">
            <h2>代码高亮风格</h2>
            <button type="button" onclick="switchStyle(this)">Default</button>
            <button type="button" onclick="switchStyle(this)">Dracula</button>
            <button type="button" onclick="switchStyle(this)" class="current">Ir Black</button>
            <button type="button" onclick="switchStyle(this)">Vs</button>
        </div>

        <div class="code-demo">
            <h2>Bash Shell</h2>
            <p>单行</p>
            <pre><code class="bash">find ~ \( -iname '*jpeg' -o -iname '*jpg' \) -type f</code></pre>
        </div>

        <div class="code-demo">
            <h2>plaintext</h2>
            <p>6 行</p>
            <pre><code class="plaintext"> id | description
----+-------------
  1 | one
  2 | two
  3 | three
(3 rows)</code></pre>
        </div>

        <div class="code-demo">
            <h2>C++</h2>
            <p>15 行</p>
            <pre><code class="cpp">#include &lt;iostream&gt;

int main(int argc, char *argv[]) {

  /* An annoying &quot;Hello World&quot; example */
  for (auto i = 0; i &lt; 0xFFFF; i++)
    cout &lt;&lt; &quot;Hello, World!&quot; &lt;&lt; endl;

  char c = &#39;\n&#39;;
  unordered_map &lt;string, vector&lt;string&gt; &gt; m;
  m[&quot;key&quot;] = &quot;\\\\&quot;; // this is an error

  return -2e3 + 12l;
}
</code></pre>
        </div>

        <div class="code-demo">
            <h2>JavaScript</h2>
            <p>100 行以上<br>代码引自 https://gitee.com/yangrz/phpmyadmin-timestamp-field-format</p>
            <pre><code class="javascript">$(function () {

    // 只监听标题包含 phpMyAdmin 的页面
    if (document.title.indexOf("phpMyAdmin") == -1) {
        return;
    }

    var $table = $('table.table_results');
    var oldContent = $table.text() + $table.data('uniqueid');

    // 转换
    function transform() {
        $('table.table_results').find('td').each(function () {
            var value = $(this).text();

            // 字段类型判断
            if ($(this).data('type') != 'int') {
                return;
            }

            // 只对以1开头的10位数的单元格进行转换
            if (!/^1\d{9}$/.test(value)) {
                return;
            }

            var date = new Date(value * 1000);
            var content = formatDate(date);
            var thisClass = 'time2date' + randomString(10);

            var thisStyle = `
                &lt;style id="${thisClass}"&gt;
                    td.${thisClass}:after {
                        position: absolute;
                        top: 50%;
                        left: 2px;
                        margin-top: -11px;
                        background: #03a9f42e;
                        display: block;
                        width: 138px;
                        height: 22px;
                        line-height: 22px;
                        text-align: center;
                        border-radius: 2px;
                        right: 100%;
                        font-style: normal;
                        content: "${content}";
                    }
                &lt;/style&gt;`;

            $(this).css({ position: 'relative', 'min-width': '232px', 'box-sizing': 'border-box' }).addClass(thisClass);
            $(document.body).append(thisStyle);
        });
    }

    // 重置
    function reset() {
        $('table.table_results').find('td').each(function () {
            var classes = $(this).attr('class').split(' ');

            for (var i in classes) {
                if (/^time2date/.test(classes[i])) {
                    // 移除旧样式表
                    $('#' + classes[i]).remove();
                    // 移除旧样式名称
                    $(this).css({ position: 'static', 'min-width': 'auto' }).removeClass(classes[i]);
                }
            }
        });
    }

    // 自动转换
    chrome.storage.local.get(['auto_transform'], function (result) {
        if (result.auto_transform) {
            transform();

            setInterval(function () {
                var $table = $('table.table_results'); // table会销毁和动态创建，不能通过外部变量缓存
                var nowContent = $table.text() + $table.data('uniqueid');
                if (oldContent != nowContent) {
                    oldContent = nowContent;
                    reset();
                    transform();
                }
            }, 1000);
        }
    });

    // Ctrl + 鼠标左键， 或 Alt + 鼠标左键
    $(document.body).mousedown(function (event) {
        if (event.ctrlKey &amp;&amp; event.which == 1) {
            reset();
            transform();
        }

        if (event.altKey &amp;&amp; event.which == 1) {
            reset();
        }
    });

    /**
     * 产生随机字符串
     * @param {Integer} len
     * @return {String}
     */
    function randomString(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var str = '';
        for (var i = 0; i &lt; len; i++) {
            str += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return str;
    }

    /**
     * 将时间差转换成日期格式
     * @param {Date} now
     * @return {String}
     */
    function formatDate(now) {
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();

        month = month &lt; 10 ? '0' + month : month;
        date = date &lt; 10 ? '0' + date : date;
        hour = hour &lt; 10 ? '0' + hour : hour;
        minute = minute &lt; 10 ? '0' + minute : minute;
        second = second &lt; 10 ? '0' + second : second;

        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }
});</code></pre>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
    <script src="https://yangrz.gitee.io/highlight.line-numbers.js/highlight.line-numbers.js"></script>

    <script>
        function switchStyle(obj) {
            var name = obj.innerText;
            var styles = document.querySelectorAll('link[title]');
            for (var i = 0; i < styles.length; i++) {
                styles[i].disabled = true;
                if (name == styles[i].title) {
                    styles[i].disabled = false;
                    document.querySelector('button.current').className = '';
                    obj.className = 'current';
                }
            }
        }

        hljs.initHighlightingOnLoad();
        hljsln.initLineNumbersOnLoad();
    </script>

</body>

</html>