✨ Feat: add params.page.code.editableCode option support (#76)

CHANGELOG.md

@@ -22,6 +22,7 @@ All notable changes to this project will be documented in this file.
   - Indented Code
   - Block Fenced Code
   - gist shortcode
+- :sparkles: Feat: add `params.page.code.editableCode` option support ([#76](https://github.com/Lruihao/FixIt/issues/76))
 - :mag: Feat: add 360 and sougou seo support
 - :bug: Fix: remove source map of local libraries to avoid 404 error ([#67](https://github.com/Lruihao/FixIt/issues/67))
 - :fire: Feat: remove shortcode cardlink ([#42](https://github.com/Lruihao/FixIt/issues/42))

assets/css/_partial/_single/_code.scss

@@ -167,11 +167,12 @@ pre {
       pre {
         padding: 0.25rem;
         border-radius: 0;
+        outline-offset: -1px;
       }
 
       /* lineNumbersInTable=false */
       .ln {
-        min-width: 1.35rem;
+        min-width: 1.25rem;
       }
 
       // ========== lineNumbersInTable ========== //

exampleSite/config.toml

@@ -685,6 +685,9 @@ enableEmoji = true
       # the maximum number of lines of displayed code by default
       # 默认展开显示的代码行数
       maxShownLines = 10
+      # whether code blocks can be edited since v0.2.13
+      # 是否允许编辑代码块 since v0.2.13
+      editableCode = true
     # KaTeX mathematical formulas config (KaTeX https://katex.org/)
     # KaTeX 数学公式配置 (KaTeX https://katex.org/)
     [params.page.math]

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -482,6 +482,8 @@ Please open the code block below to view the complete sample configuration :(far
       copy = true
       # the maximum number of lines of displayed code by default
       maxShownLines = 10
+      # {{< version 0.2.13 >}} whether code blocks can be edited
+      editableCode = false
     # {{< version 0.2.0 >}} {{< link "https://docs.mapbox.com/mapbox-gl-js" "Mapbox GL JS" >}} config (https://docs.mapbox.com/mapbox-gl-js)
     [params.page.mapbox]
       # access token of Mapbox GL JS

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -480,6 +480,8 @@ hugo
       copy = true
       # 默认展开显示的代码行数
       maxShownLines = 10
+      # {{< version 0.2.13 >}} 是否允许编辑代码块
+      editableCode = false
     # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式 (https://katex.org)
     [params.page.math]
       enable = true

exampleSite/content/tests/highlight.md

@@ -156,7 +156,7 @@ var _str2Array = (str) => {
     return str.split(',');
   }
 };
-{{< / highlight >}}
+{{< /highlight >}}
 
 ---
 

layouts/partials/assets.html

@@ -56,6 +56,7 @@
 
 {{- $code := $params.code | default dict -}}
 {{- $config = cond (ne $code.maxShownLines nil) $code.maxShownLines 10 | dict "maxShownLines" | dict "code" | merge $config -}}
+{{- $config = cond (ne $code.editableCode nil) $code.editableCode false | dict "editableCode" | dict "code" | merge $config -}}
 
 {{- /* clipboard.js */ -}}
 {{- if ne $code.copy false -}}

src/js/theme.js

@@ -402,6 +402,11 @@ class Theme {
   }
 
   initHighlight() {
+    if (this.config.code.editableCode){
+      this.util.forEach(document.querySelectorAll('.highlight pre.chroma'), ($preChroma) => {
+        $preChroma.setAttribute('contenteditable', true);
+      });
+    }
     this.util.forEach(document.querySelectorAll('.highlight > pre.chroma'), ($preChroma) => {
       const $chroma = document.createElement('div');
       $chroma.className = $preChroma.className;