fix: use new highlight option

See: https://gohugo.io/content-management/syntax-highlighting/

10 files changed, 108 insertions, 568 deletions

diff --git a/assets/sass/_partial/_post/_chroma_highlight.scss b/assets/sass/_partial/_post/_chroma_highlight.scss
deleted file mode 100644
index 44a91f4..0000000
--- a/assets/sass/_partial/_post/_chroma_highlight.scss
+++ /dev/null
@@ -1,487 +0,0 @@
-/* Background */
-
-.chroma {
-    color: #586e75;
-    background-color: $code-background
-}
-
-/* LineTableTD */
-
-.chroma .lntd {
-    vertical-align: top;
-    padding: 0;
-    margin: 0;
-    border: 0;
-}
-
-/* LineTable */
-
-.chroma .lntable {
-    border-spacing: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    width: auto;
-    overflow: auto;
-    display: block;
-}
-
-/* LineHighlight */
-
-.chroma .hl {
-    display: block;
-    width: 100%;
-    background-color: #ffc;
-}
-
-/* LineNumbersTable */
-
-.chroma .lntd:first-of-type {
-    margin-right: 0.4em;
-    padding: 0 0.8em 0 0.4em;
-}
-
-/* LineNumbers */
-
-.chroma .ln {
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-}
-
-/* Keyword */
-
-.chroma .k {
-    color: #859900
-}
-
-/* KeywordConstant */
-
-.chroma .kc {
-    color: #859900;
-    font-weight: bold
-}
-
-/* KeywordDeclaration */
-
-.chroma .kd {
-    color: #859900
-}
-
-/* KeywordNamespace */
-
-.chroma .kn {
-    color: #dc322f;
-    font-weight: bold
-}
-
-/* KeywordPseudo */
-
-.chroma .kp {
-    color: #859900
-}
-
-/* KeywordReserved */
-
-.chroma .kr {
-    color: #859900
-}
-
-/* KeywordType */
-
-.chroma .kt {
-    color: #859900;
-    font-weight: bold
-}
-
-/* Name */
-
-.chroma .n {
-    color: #268bd2
-}
-
-/* NameAttribute */
-
-.chroma .na {
-    color: #268bd2
-}
-
-/* NameBuiltin */
-
-.chroma .nb {
-    color: #cb4b16
-}
-
-/* NameBuiltinPseudo */
-
-.chroma .bp {
-    color: #268bd2
-}
-
-/* NameClass */
-
-.chroma .nc {
-    color: #cb4b16
-}
-
-/* NameConstant */
-
-.chroma .no {
-    color: #268bd2
-}
-
-/* NameDecorator */
-
-.chroma .nd {
-    color: #268bd2
-}
-
-/* NameEntity */
-
-.chroma .ni {
-    color: #268bd2
-}
-
-/* NameException */
-
-.chroma .ne {
-    color: #268bd2
-}
-
-/* NameFunction */
-
-.chroma .nf {
-    color: #268bd2
-}
-
-/* NameFunctionMagic */
-
-.chroma .fm {
-    color: #268bd2
-}
-
-/* NameLabel */
-
-.chroma .nl {
-    color: #268bd2
-}
-
-/* NameNamespace */
-
-.chroma .nn {
-    color: #268bd2
-}
-
-/* NameOther */
-
-.chroma .nx {
-    color: #268bd2
-}
-
-/* NameProperty */
-
-.chroma .py {
-    color: #268bd2
-}
-
-/* NameTag */
-
-.chroma .nt {
-    color: #268bd2;
-    font-weight: bold
-}
-
-/* NameVariable */
-
-.chroma .nv {
-    color: #268bd2
-}
-
-/* NameVariableClass */
-
-.chroma .vc {
-    color: #268bd2
-}
-
-/* NameVariableGlobal */
-
-.chroma .vg {
-    color: #268bd2
-}
-
-/* NameVariableInstance */
-
-.chroma .vi {
-    color: #268bd2
-}
-
-/* NameVariableMagic */
-
-.chroma .vm {
-    color: #268bd2
-}
-
-/* Literal */
-
-.chroma .l {
-    color: #2aa198
-}
-
-/* LiteralDate */
-
-.chroma .ld {
-    color: #2aa198
-}
-
-/* LiteralString */
-
-.chroma .s {
-    color: #2aa198
-}
-
-/* LiteralStringAffix */
-
-.chroma .sa {
-    color: #2aa198
-}
-
-/* LiteralStringBacktick */
-
-.chroma .sb {
-    color: #2aa198
-}
-
-/* LiteralStringChar */
-
-.chroma .sc {
-    color: #2aa198
-}
-
-/* LiteralStringDelimiter */
-
-.chroma .dl {
-    color: #2aa198
-}
-
-/* LiteralStringDoc */
-
-.chroma .sd {
-    color: #2aa198
-}
-
-/* LiteralStringDouble */
-
-.chroma .s2 {
-    color: #2aa198
-}
-
-/* LiteralStringEscape */
-
-.chroma .se {
-    color: #2aa198
-}
-
-/* LiteralStringHeredoc */
-
-.chroma .sh {
-    color: #2aa198
-}
-
-/* LiteralStringInterpol */
-
-.chroma .si {
-    color: #2aa198
-}
-
-/* LiteralStringOther */
-
-.chroma .sx {
-    color: #2aa198
-}
-
-/* LiteralStringRegex */
-
-.chroma .sr {
-    color: #2aa198
-}
-
-/* LiteralStringSingle */
-
-.chroma .s1 {
-    color: #2aa198
-}
-
-/* LiteralStringSymbol */
-
-.chroma .ss {
-    color: #2aa198
-}
-
-/* LiteralNumber */
-
-.chroma .m {
-    color: #2aa198;
-    font-weight: bold
-}
-
-/* LiteralNumberBin */
-
-.chroma .mb {
-    color: #2aa198;
-    font-weight: bold
-}
-
-/* LiteralNumberFloat */
-
-.chroma .mf {
-    color: #2aa198;
-    font-weight: bold
-}
-
-/* LiteralNumberHex */
-
-.chroma .mh {
-    color: #2aa198;
-    font-weight: bold
-}
-
-/* LiteralNumberInteger */
-
-.chroma .mi {
-    color: #2aa198;
-    font-weight: bold
-}
-
-/* LiteralNumberIntegerLong */
-
-.chroma .il {
-    color: #2aa198;
-    font-weight: bold
-}
-
-/* LiteralNumberOct */
-
-.chroma .mo {
-    color: #2aa198;
-    font-weight: bold
-}
-
-/* OperatorWord */
-
-.chroma .ow {
-    color: #859900
-}
-
-/* Comment */
-
-.chroma .c {
-    color: #93a1a1;
-    font-style: italic
-}
-
-/* CommentHashbang */
-
-.chroma .ch {
-    color: #93a1a1;
-    font-style: italic
-}
-
-/* CommentMultiline */
-
-.chroma .cm {
-    color: #93a1a1;
-    font-style: italic
-}
-
-/* CommentSingle */
-
-.chroma .c1 {
-    color: #93a1a1;
-    font-style: italic
-}
-
-/* CommentSpecial */
-
-.chroma .cs {
-    color: #93a1a1;
-    font-style: italic
-}
-
-/* CommentPreproc */
-
-.chroma .cp {
-    color: #93a1a1;
-    font-style: italic
-}
-
-/* CommentPreprocFile */
-
-.chroma .cpf {
-    color: #93a1a1;
-    font-style: italic
-}
-
-/* Generic */
-
-.chroma .g {
-    color: #d33682
-}
-
-/* GenericDeleted */
-
-.chroma .gd {
-    color: #d33682
-}
-
-/* GenericEmph */
-
-.chroma .ge {
-    color: #d33682
-}
-
-/* GenericError */
-
-.chroma .gr {
-    color: #d33682
-}
-
-/* GenericHeading */
-
-.chroma .gh {
-    color: #d33682
-}
-
-/* GenericInserted */
-
-.chroma .gi {
-    color: #d33682
-}
-
-/* GenericOutput */
-
-.chroma .go {
-    color: #d33682
-}
-
-/* GenericPrompt */
-
-.chroma .gp {
-    color: #d33682
-}
-
-/* GenericStrong */
-
-.chroma .gs {
-    color: #d33682
-}
-
-/* GenericSubheading */
-
-.chroma .gu {
-    color: #d33682
-}
-
-/* GenericTraceback */
-
-.chroma .gt {
-    color: #d33682
-}
diff --git a/assets/sass/_partial/_post/_code.scss b/assets/sass/_partial/_post/_code.scss
deleted file mode 100644
index a19c577..0000000
--- a/assets/sass/_partial/_post/_code.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-// ==============================
-// Post code
-// ==============================
-
-// normal <code> style
-code {
-  padding: 3px 7px;
-  background: $code-background;
-  border-radius: 4px;
-  color: $code-color;
-}
-
-code, pre {
-  font-size: $code-font-size;
-  font-family: $code-font-family;
-}
-
-
-// chroma code block style
-.highlight > .chroma {
-  margin: 1em 0;
-  overflow-x: auto;
-  position: relative;
-  border: 2px solid #dddddd;
-  line-height: 1.6;
-
-  code {
-    padding: 0;     /* remove normal code padding */
-    color: inherit;
-  }
-
-  pre {
-    margin: 0;      /* remove normal pre margin */
-  }
-
-  table {
-    position: relative;
-    padding: 0.8em 0;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      padding: 0 7px;
-      font-size: 0.8em;
-      font-weight: bold;
-      color: darken($gray, 10%);
-      // background: darken($code-background, 3%);
-      content: 'Code';
-    }
-  }
-
-  > table::after {
-    content: attr(data-lang);
-    text-transform: capitalize;
-  }
-
-  .lnt {
-    color: $gray;
-  }
-}
-
-@import '_chroma_highlight';
diff --git a/assets/sass/_partial/_post/_content.scss b/assets/sass/_partial/_post/_content.scss
index 0ff102f..c7c7177 100644
--- a/assets/sass/_partial/_post/_content.scss
+++ b/assets/sass/_partial/_post/_content.scss
@@ -5,6 +5,11 @@
 .post-content {
   word-wrap: break-word;
 
+  @import 'content/highlight';
+  @import 'content/code';
+  @import 'content/image';
+  @import 'content/blockquote';
+
   @for $i from 1 through 6 {
     h#{$i} {
       font-weight: 600;
@@ -106,10 +111,6 @@
     overflow-x: auto;
     overflow-y: hidden;
   }
-
-  @import 'code';
-  @import 'image';
-  @import 'blockquote';
 }
 
 .header-link {
diff --git a/assets/sass/_partial/_post/_blockquote.scss b/assets/sass/_partial/_post/content/_blockquote.scss
index 41f8fd2..41f8fd2 100644
--- a/assets/sass/_partial/_post/_blockquote.scss
+++ b/assets/sass/_partial/_post/content/_blockquote.scss
diff --git a/assets/sass/_partial/_post/content/_code.scss b/assets/sass/_partial/_post/content/_code.scss
new file mode 100644
index 0000000..797624c
--- /dev/null
+++ b/assets/sass/_partial/_post/content/_code.scss
@@ -0,0 +1,22 @@
+// ==============================
+// Post code
+// ==============================
+
+// normal <code> style
+code {
+  padding: 3px 7px;
+  background: $code-background;
+  border-radius: 4px;
+  color: $code-color;
+}
+
+code, pre {
+  font-size: $code-font-size;
+  font-family: $code-font-family;
+}
+
+
+// chroma code block style
+
+
+// @import '_chroma_highlight';
diff --git a/assets/sass/_partial/_post/content/_highlight.scss b/assets/sass/_partial/_post/content/_highlight.scss
new file mode 100644
index 0000000..6f200ec
--- /dev/null
+++ b/assets/sass/_partial/_post/content/_highlight.scss
@@ -0,0 +1,29 @@
+.highlight {
+  position: relative;
+  margin: 1em 0;
+  overflow-x: auto;
+  border: 2px solid #dddddd;
+  line-height: 1.6;
+
+  code {
+    all: unset;
+  }
+
+  pre {
+    margin: 0; /* remove normal pre margin */
+  }
+
+  table {
+    padding: 1em 0.3em !important;
+
+    td:nth-child(2) code{
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0.5em;
+        font-weight: bold;
+        content: attr(data-lang);
+      }
+    }
+  }
+}
diff --git a/assets/sass/_partial/_post/_image.scss b/assets/sass/_partial/_post/content/_image.scss
index bb9b681..bb9b681 100644
--- a/assets/sass/_partial/_post/_image.scss
+++ b/assets/sass/_partial/_post/content/_image.scss
diff --git a/dev-config.toml b/dev-config.toml
index 3018eb3..95f97aa 100644
--- a/dev-config.toml
+++ b/dev-config.toml
@@ -17,12 +17,6 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
 enableGitInfo = true # use git commit log to generate lastmod record # 可根据 Git 中的提交生成最近更新记录。
 # uglyURLs = true
 
-# Highlight options. See https://gohugo.io/content-management/syntax-highlighting/
-pygmentsCodeFences = true # Enable syntax highlighting with GitHub flavoured code fences
-pygmentsUseClasses = true # Use CSS classes to format highlighted code
-pygmentsCodefencesGuessSyntax = true
-pygmentsOptions = "linenos=table"
-
 # language support en / zh-cn / other... translations present in i18n/
 defaultContentLanguage = "en"  # Default language to use (if you setup multilingual support)
 [langusges]
@@ -208,3 +202,20 @@ defaultContentLanguage = "en"  # Default language to use (if you setup multiling
     q-bilibili = "http://en.xianmin.org/hugo-theme-jane/"
     r-codeforces = "http://en.xianmin.org/hugo-theme-jane/"
     s-mastodon = "http://en.xianmin.org/hugo-theme-jane/"
+
+# Highlight options. See https://gohugo.io/content-management/syntax-highlighting/
+[markup]
+  [markup.highlight]
+    anchorLineNos = true
+    codeFences = true
+    guessSyntax = false
+    hl_Lines = ''
+    hl_inline = false
+    lineAnchors = ''
+    lineNoStart = 1
+    lineNos = true
+    lineNumbersInTable = true
+    noClasses = true
+    noHl = false
+    style = 'friendly'
+    tabWidth = 4
diff --git a/exampleSite/content/post/jane-theme-preview.md b/exampleSite/content/post/jane-theme-preview.md
index 5e9be72..91e0872 100644
--- a/exampleSite/content/post/jane-theme-preview.md
+++ b/exampleSite/content/post/jane-theme-preview.md
@@ -97,13 +97,24 @@ You can change the complete/incomplete state by click the checkbox before the it
 
 ## Syntax Highlighting
 
+unset language:
+
 ```js
 function helloWorld () {
   alert("Hello, World!")
 }
 ```
 
-```java
+```text
+plain text
+
+first line
+second line
+```
+
+**choose different style:**
+
+```java {style=github}
 public class HelloWorld {
   public static void main(String[] args) {
     System.out.println("Hello, World!");
@@ -111,6 +122,14 @@ public class HelloWorld {
 }
 ```
 
+{{< highlight java "style=vim">}}
+public class HelloWorld {
+  public static void main(String[] args) {
+    System.out.println("Hello, World!");
+  }
+}
+{{< / highlight >}}
+
 ## Math Blocks
 
 You can render *LaTeX* mathematical expressions using **MathJax**.
diff --git a/exampleSite/full-config.toml b/exampleSite/full-config.toml
index 9642a6e..1535174 100644
--- a/exampleSite/full-config.toml
+++ b/exampleSite/full-config.toml
@@ -13,13 +13,6 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
 enableGitInfo = true      # use git commit log to generate lastmod record # 可根据 Git 中的提交生成最近更新记录。
 # uglyURLs = true         # more info: https://gohugo.io/content-management/urls/#ugly-urls
 
-# Highlight options.
-# See https://gohugo.io/content-management/syntax-highlighting/
-PygmentsCodeFences = true # Enable syntax highlighting with GitHub flavoured code fences
-PygmentsUseClasses = true # Use CSS classes to format highlighted code
-PygmentsCodefencesGuessSyntax = true
-PygmentsOptions = "linenos=table"
-
 # Enable author pages
 #[taxonomies]
 #  author = "author"
@@ -255,3 +248,18 @@ defaultContentLanguage = "en"           # Default language to use
   [markup.goldmark]
     [markup.goldmark.renderer]
       unsafe = true
+
+  # Highlight options. See https://gohugo.io/content-management/syntax-highlighting/
+  [markup.highlight]
+    anchorLineNos = true
+    codeFences = true
+    guessSyntax = false
+    hl_Lines = ''
+    hl_inline = false
+    lineAnchors = ''
+    lineNoStart = 1
+    lineNos = true
+    lineNumbersInTable = true
+    noHl = false
+    style = 'friendly'
+    tabWidth = 4