feat: achieve line number setting

Author: xiaoluoboding

README.md

@@ -1,14 +1,16 @@
 # Kaldorei
+
 A Simple And Elegant Ghost Theme Derive From Default Theme Casper
 
-![Ghost 2.x](https://img.shields.io/badge/Ghost-v2.x-blue.svg?style=flat-square)
-![Kaldorei 2.1.0](https://img.shields.io/badge/Kaldorei-v2.1.0-009a61.svg?style=flat-square)
+![Ghost 3.x](https://img.shields.io/badge/Ghost-v3.x-blue.svg?style=flat-square)
+![Kaldorei 3.0.0](https://img.shields.io/badge/Kaldorei-v3.0.0-009a61.svg?style=flat-square)
 
-# Preview
+## Preview
 
 ![img](assets/img/preview.png)
 
 ## Plan to do
+
 - [x] 主题基调定为小清新绿色
 
 - [x] 文章样式色调为墨蓝色
@@ -48,14 +50,17 @@ Ghost2.x版本中支持了语言的切换，Kaldorei 同时也支持了中/英
 > 方法：ghost后台 > `General` > `Publication Language` 改为 `zh` 即可
 
 ### 🏷️ 标签统计
+
 Kaldorei使用了ghost的api来做统计，所以需要开启ghost的实验室中的`Public API`功能。
 
 > 方法：ghost后台 > `labs` > `Enable Beta Features` > `勾选 Public API`
 
 ### 🌄 图片幻灯片
+
 Kaldorei集成了fancyBox，支持图片暗箱效果、幻灯片轮播、全屏预览、缩略图预览等功能。预览&使用方法[图片预览](http://xlbd.me/how-to-use-fancybox-in-ghost-blog/)
 
 ### 💬 开启Disqus
+
 Kaldorei支持Disqus讨论插件，只需在后台`代码注入`处添加一段代码。
 
 > 方法：ghost后台 > `Code Injection` > `Blog Header`
@@ -67,6 +72,7 @@ Kaldorei支持Disqus讨论插件，只需在后台`代码注入`处添加一段
 ```
 
 ### 🗂 开启归档功能
+
 Kaldorei提供了简单的归档功能，使用ghost的api来生成归档，预览[博客归档](http://xlbd.me/archives)。
 
 > 方法：ghost后台:
@@ -76,6 +82,7 @@ Kaldorei提供了简单的归档功能，使用ghost的api来生成归档，预
 > * 去博客首页看看你的归档吧，Have fun.
 
 ### 🎨 更换代码主题
+
 Kaldorei使用[highlight.js](https://github.com/isagalaev/highlight.js)实现代码高亮，默认使用的主题风格为 `monokai-sublime`
 
 > 方法：ghost后台 > `Code Injection` > `Blog Header`
@@ -87,6 +94,34 @@ Kaldorei使用[highlight.js](https://github.com/isagalaev/highlight.js)实现代
 
 [完整主题列表](https://highlightjs.org/static/demo/)
 
+### 🔢 开启显示代码行号
+
+> 主题版本 3.x 新增
+
+Kaldorei 实现了配置的方式开启显示代码行号，默认是关闭的，支持 `dark` / `light` 两种模式
+
+> 方法：ghost后台 > `Code Injection` > `Blog Header`
+
+```js
+<script>
+  var hljsSettings = {
+    lineNumber: true,  // 可选值 flase / true, 默认为 false
+    mode: 'light'  // 可选值 dark / light，默认为 'dark'
+  };
+</script>
+```
+
+不仅行号可以配置，行号的背景色也可以自定义，默认行号背景色如下：
+
+```html
+<style>
+:root {
+  --linenumber-dark-bg: #282c34;
+  --linenumber-light-bg: #c5d2d9;
+}
+</style>
+```
+
 ### 🔍 搜索功能
 
 搜索引擎默认支持按博文标题搜索，此功能需要安装的 `ghost` 版本 >= `2.10.x`。

assets/css/screen.css

@@ -2200,16 +2200,53 @@ pre {
     overflow: hidden;
 }
 code.has-numbering {
+    display: block;
     margin-left: 32px;
     padding: 0.5em;
     white-space: pre;
     word-wrap: normal;
-    display: block;
 }
 code.hljs {
     padding: 1.2em 2em;
 }
 
+pre .line-numbering {
+    position: absolute;
+    top: 0;
+    width: 3.5rem;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.3);
+    padding: 1.25rem 0;
+    line-height: 1.4;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-evenly;
+}
+
+pre .line-numbering.light {
+    color: currentColor;
+}
+
+pre code.has-numbering::after {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    width: 3.5rem;
+    height: 100%;
+    border-radius: 6px 0 0 6px;
+    border-right: 1px solid rgba(0, 0, 0, 0.66);
+    background-color: var(--linenumber-dark-bg);
+}
+
+pre code.has-numbering.light::after {
+    background-color: var(--linenumber-light-bg);
+    border-right: currentColor;
+}
+
 /* ==========================================================================
   23. Archives
   ========================================================================== */

assets/css/variables.css

@@ -14,6 +14,8 @@
   --midgrey: #738a94;
   --lightgrey: #c5d2d9;
   --whitegrey: #e5eff5;
+  --linenumber-dark-bg: #282c34;
+  --linenumber-light-bg: #c5d2d9;
 
   /* font-family */
   --sans-serif: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

assets/js/index.js

@@ -31,21 +31,29 @@
             scrollToTop();
         });
 
+        // hljs settings
+        if (typeof hljsSettings === "undefined") {
+            window.hljsSettings = {};
+        }
+
         // highlight config
         hljs.initHighlightingOnLoad();
         // dynamicInjectHljsStyle()
 
         // numbering for pre>code blocks
-        // $(function() {
-        //     $('pre code').each(function() {
-        //         var lines = $(this).text().split('\n').length - 1;
-        //         var $numbering = $('<ul/>').addClass('pre-numbering');
-        //         $(this).addClass('has-numbering').parent().append($numbering);
-        //         for (var i = 1; i <= lines; i++) {
-        //             $numbering.append($('<li/>').text(i));
-        //         }
-        //     });
-        // });
+        if (hljsSettings.lineNumber) {
+            $(function () {
+                $('pre code').each(function () {
+                    var lines = $(this).text().split('\n').length - 1;
+                    var mode = hljsSettings.mode || 'dark'
+                    var $numbering = $('<div/>').addClass('line-numbering').addClass(mode);
+                    $(this).addClass('has-numbering').addClass(mode).parent().append($numbering);
+                    for (var i = 1; i <= lines; i++) {
+                        $numbering.append($('<span/>').text(i));
+                    }
+                });
+            });
+        }
 
         // toc config
         var toc = $('.toc');