first commit

layout/common/navbar.ftl

@@ -81,5 +81,6 @@
             });
 
         })();
+
     </script>
 </#macro>

layout/layout.ftl

@@ -73,7 +73,10 @@
         <#if post??>
             <link rel="stylesheet" type="text/css"
                   href="${static!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css"/>
+            <link rel="stylesheet" type="text/css"
+                  href="${static!}/source/lib/prism/css/prism-line-numbers.css"/>
             <script type="text/javascript" src="${static!}/source/lib/prism/js/prism.js"></script>
+            <script type="text/javascript" src="${static!}/source/lib/prism/js/prism-line-numbers.js"></script>
         </#if>
         <#if is_index??>
             <link rel="stylesheet" href="${static!}/source/css/widget_pin.css">

settings.yaml

@@ -54,6 +54,8 @@ post:
           label: Tomorrow Night
         - value: Twilight
           label: Twilight
+        - value: light
+          label: light
 social:
   label: 社交设置
   items:

source/lib/prism/css/prism-light.css

@@ -0,0 +1,234 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+    font-size: 12px;
+    line-height: 1.8;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    background: #F1F3F3;
+    color: #303030;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #E0E0E0;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #E0E0E0;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 0em;
+    margin: .5em 0;
+    overflow: auto;
+    border-radius: 4px;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #B0B0B0;
+}
+
+.token.punctuation {
+    color: #303030;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+    color: #FD8900;
+}
+
+.token.property {
+    color: #ABA800;
+}
+
+.token.tag {
+    color: #3777E6;
+}
+
+.token.string {
+    color: #1faaaa;
+}
+
+.token.selector {
+    color: #AD00A1;
+}
+
+.token.attr-name {
+    color: #FD8900;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: #1faaaa;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+    color: #00C918;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+    color: #1faaaa;
+}
+
+.token.placeholder,
+.token.variable {
+    color: #3777E6;
+}
+
+.token.deleted {
+    text-decoration: line-through;
+}
+
+.token.inserted {
+    border-bottom: 1px dotted #151515;
+    text-decoration: none;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.important {
+    color: #FF0086;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+pre > code.highlight {
+    outline: 0.4em solid #FF0086;
+    outline-offset: .4em;
+}
+
+.line-numbers .line-numbers-rows {
+    border-right-color: #E0E0E0 !important;
+    line-height: 1.8;
+}
+
+.line-numbers-rows > span:before {
+    color: #D0D0D0 !important;
+}
+
+.line-highlight {
+    background: rgba(21, 21, 21, 0.2) !important;
+    background: -webkit-linear-gradient(left, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
+    background: linear-gradient(to right, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
+}
+
+
+div.code-toolbar {
+    position: relative;
+}
+
+div.code-toolbar > .toolbar {
+    position: absolute;
+    top: .3em;
+    right: .2em;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+    opacity: 1;
+}
+
+/* Separate line b/c rules are thrown out if selector is invalid.
+   IE11 and old Edge versions don't support :focus-within. */
+div.code-toolbar:focus-within > .toolbar {
+    opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+    display: inline-block;
+}
+div.code-toolbar > .toolbar .toolbar-item:not(:first-child){
+    margin-left: 10px;
+}
+
+div.code-toolbar > .toolbar a {
+    cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    -webkit-user-select: none; /* for button */
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+    font-size: .8em;
+    padding: .5em 1em;
+    background: #f5f2f0;
+    background: rgba(224, 224, 224, 0.2);
+    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+    border-radius: 2px;
+}
+div.code-toolbar > .toolbar a:not(:first-child),
+div.code-toolbar > .toolbar button:not(:first-child),
+div.code-toolbar > .toolbar span:not(:first-child) {
+    margin-left: 10px;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+    color: inherit;
+    text-decoration: none;
+    color: #333333;
+    cursor: pointer;
+    opacity: 1;
+}

source/lib/prism/css/prism-line-numbers.css

@@ -0,0 +1,40 @@
+pre.line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+    position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0.2rem;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+}
+
+.line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #788;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+    background-color: #EBEDED;
+}

source/lib/prism/js/prism-line-numbers.js

@@ -0,0 +1,117 @@
+(function () {
+
+    if (typeof self === 'undefined' || !self.Prism || !self.document) {
+        return;
+    }
+
+    /**
+     * Class name for <pre> which is activating the plugin
+     * @type {String}
+     */
+    var PLUGIN_CLASS = 'line-numbers';
+
+    /**
+     * Resizes line numbers spans according to height of line of code
+     * @param  {Element} element <pre> element
+     */
+    var _resizeElement = function (element) {
+        var codeStyles = getStyles(element);
+        var whiteSpace = codeStyles['white-space'];
+
+        if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
+            var codeElement = element.querySelector('code');
+            var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
+            var lineNumberSizer = element.querySelector('.line-numbers-sizer');
+            var codeLines = element.textContent.split('\n');
+
+            if (!lineNumberSizer) {
+                lineNumberSizer = document.createElement('span');
+                lineNumberSizer.className = 'line-numbers-sizer';
+
+                codeElement.appendChild(lineNumberSizer);
+            }
+
+            lineNumberSizer.style.display = 'block';
+
+            codeLines.forEach(function (line, lineNumber) {
+                lineNumberSizer.textContent = line || '\n';
+                var lineSize = lineNumberSizer.getBoundingClientRect().height;
+                lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
+            });
+
+            lineNumberSizer.textContent = '';
+            lineNumberSizer.style.display = 'none';
+        }
+    };
+
+    /**
+     * Returns style declarations for the element
+     * @param {Element} element
+     */
+    var getStyles = function (element) {
+        if (!element) {
+            return null;
+        }
+
+        return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
+    };
+
+    window.addEventListener('resize', function () {
+        Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
+    });
+
+    Prism.hooks.add('complete', function (env) {
+        if (!env.code) {
+            return;
+        }
+
+        // works only for <code> wrapped inside <pre> (not inline)
+        var pre = env.element.parentNode;
+        // Original regex check for class, leaving it here
+        // for its redundancy check
+        var clsReg = /\s*\bline-numbers\b\s*/;
+        // New regex check for opt-out class
+        var clsRegB = /\s*\bno-line-numbers\b\s*/;
+
+        if (env.element.querySelector(".line-numbers-rows")) {
+            // Abort if line numbers already exists
+            return;
+        }
+
+        // Added to facilitate opting out
+        if (clsRegB.test(pre.className)) {
+            // Respect the opt-out
+            return;
+        }
+
+        if (clsReg.test(env.element.className)) {
+            // Remove the class "line-numbers" from the <code>
+            env.element.className = env.element.className.replace(clsReg, ' ');
+        }
+        if (!clsReg.test(pre.className)) {
+            // Add the class "line-numbers" to the <pre>
+            pre.className += ' line-numbers';
+        }
+
+        var match = env.code.match(/\n(?!$)/g);
+        var linesNum = match ? match.length + 1 : 1;
+        var lineNumbersWrapper;
+
+        var lines = new Array(linesNum + 1);
+        lines = lines.join('<span></span>');
+
+        lineNumbersWrapper = document.createElement('span');
+        lineNumbersWrapper.setAttribute('aria-hidden', 'true');
+        lineNumbersWrapper.className = 'line-numbers-rows';
+        lineNumbersWrapper.innerHTML = lines;
+
+        if (pre.hasAttribute('data-start')) {
+            pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
+        }
+
+        env.element.appendChild(lineNumbersWrapper);
+
+        _resizeElement(pre);
+    });
+
+}());