diff --git a/assets/css/_common/scaffolding/highlight/copy-code.scss b/assets/css/_common/scaffolding/highlight/copy-code.scss
index bafac01..23c14c5 100644
--- a/assets/css/_common/scaffolding/highlight/copy-code.scss
+++ b/assets/css/_common/scaffolding/highlight/copy-code.scss
@@ -5,31 +5,130 @@
margin-bottom: 26px;
line-height: 1.25;
- //TODO Need fixed the copy button show position.
- div:first-child {
- overflow-x: auto;
- }
-
- pre {
+ > .chroma {
position: relative;
- overflow-x: auto;
- padding: 6px;
- overflow-wrap: break-word;
- line-break: anywhere;
+
+ pre {
+ padding: .45rem 0;
+ }
+
+ .lntd:first-child {
+ min-width: 1.6rem;
+ text-align: right;
+ background-color: #272822;
+
+ a {
+ border-bottom: none;
+ }
+ }
+
+ .lntd:last-child {
+ width: 100%;
+
+ pre {
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+ line-break: anywhere;
+ word-break: break-all;
+ overflow-x: auto;
+ }
+ }
+
+ > code > span {
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+ line-break: anywhere;
+ word-break: break-all;
+ }
}
- /* table tbody tr {
- //TODO Fixed the too long code line over
- // layout background color.
- background: #272822;
- }*/
-
- /* pre > code span {
- white-space: break-spaces;
- overflow: hidden;
- word-break: break-all;
- word-wrap: break-word;
- } */
+ /** monokai highlight style **/
+ /* Background */ .bg { color:#f8f8f2;background-color:#272822; }
+ /* PreWrapper */ .chroma { color:#f8f8f2;background-color:#272822; }
+ /* Other */ .chroma .x { }
+ /* Error */ .chroma .err { color:#960050;background-color:#1e0010 }
+ /* CodeLine */ .chroma .cl { }
+ /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+ /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+ /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
+ /* LineHighlight */ .chroma .hl { background-color:#3c3d38 }
+ /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+ /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+ /* Line */ .chroma .line { display:flex; }
+ /* Keyword */ .chroma .k { color:#66d9ef }
+ /* KeywordConstant */ .chroma .kc { color:#66d9ef }
+ /* KeywordDeclaration */ .chroma .kd { color:#66d9ef }
+ /* KeywordNamespace */ .chroma .kn { color:#f92672 }
+ /* KeywordPseudo */ .chroma .kp { color:#66d9ef }
+ /* KeywordReserved */ .chroma .kr { color:#66d9ef }
+ /* KeywordType */ .chroma .kt { color:#66d9ef }
+ /* Name */ .chroma .n { }
+ /* NameAttribute */ .chroma .na { color:#a6e22e }
+ /* NameBuiltin */ .chroma .nb { }
+ /* NameBuiltinPseudo */ .chroma .bp { }
+ /* NameClass */ .chroma .nc { color:#a6e22e }
+ /* NameConstant */ .chroma .no { color:#66d9ef }
+ /* NameDecorator */ .chroma .nd { color:#a6e22e }
+ /* NameEntity */ .chroma .ni { }
+ /* NameException */ .chroma .ne { color:#a6e22e }
+ /* NameFunction */ .chroma .nf { color:#a6e22e }
+ /* NameFunctionMagic */ .chroma .fm { }
+ /* NameLabel */ .chroma .nl { }
+ /* NameNamespace */ .chroma .nn { }
+ /* NameOther */ .chroma .nx { color:#a6e22e }
+ /* NameProperty */ .chroma .py { }
+ /* NameTag */ .chroma .nt { color:#f92672 }
+ /* NameVariable */ .chroma .nv { }
+ /* NameVariableClass */ .chroma .vc { }
+ /* NameVariableGlobal */ .chroma .vg { }
+ /* NameVariableInstance */ .chroma .vi { }
+ /* NameVariableMagic */ .chroma .vm { }
+ /* Literal */ .chroma .l { color:#ae81ff }
+ /* LiteralDate */ .chroma .ld { color:#e6db74 }
+ /* LiteralString */ .chroma .s { color:#e6db74 }
+ /* LiteralStringAffix */ .chroma .sa { color:#e6db74 }
+ /* LiteralStringBacktick */ .chroma .sb { color:#e6db74 }
+ /* LiteralStringChar */ .chroma .sc { color:#e6db74 }
+ /* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 }
+ /* LiteralStringDoc */ .chroma .sd { color:#e6db74 }
+ /* LiteralStringDouble */ .chroma .s2 { color:#e6db74 }
+ /* LiteralStringEscape */ .chroma .se { color:#ae81ff }
+ /* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 }
+ /* LiteralStringInterpol */ .chroma .si { color:#e6db74 }
+ /* LiteralStringOther */ .chroma .sx { color:#e6db74 }
+ /* LiteralStringRegex */ .chroma .sr { color:#e6db74 }
+ /* LiteralStringSingle */ .chroma .s1 { color:#e6db74 }
+ /* LiteralStringSymbol */ .chroma .ss { color:#e6db74 }
+ /* LiteralNumber */ .chroma .m { color:#ae81ff }
+ /* LiteralNumberBin */ .chroma .mb { color:#ae81ff }
+ /* LiteralNumberFloat */ .chroma .mf { color:#ae81ff }
+ /* LiteralNumberHex */ .chroma .mh { color:#ae81ff }
+ /* LiteralNumberInteger */ .chroma .mi { color:#ae81ff }
+ /* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff }
+ /* LiteralNumberOct */ .chroma .mo { color:#ae81ff }
+ /* Operator */ .chroma .o { color:#f92672 }
+ /* OperatorWord */ .chroma .ow { color:#f92672 }
+ /* Punctuation */ .chroma .p { }
+ /* Comment */ .chroma .c { color:#75715e }
+ /* CommentHashbang */ .chroma .ch { color:#75715e }
+ /* CommentMultiline */ .chroma .cm { color:#75715e }
+ /* CommentSingle */ .chroma .c1 { color:#75715e }
+ /* CommentSpecial */ .chroma .cs { color:#75715e }
+ /* CommentPreproc */ .chroma .cp { color:#75715e }
+ /* CommentPreprocFile */ .chroma .cpf { color:#75715e }
+ /* Generic */ .chroma .g { }
+ /* GenericDeleted */ .chroma .gd { color:#f92672 }
+ /* GenericEmph */ .chroma .ge { font-style:italic }
+ /* GenericError */ .chroma .gr { }
+ /* GenericHeading */ .chroma .gh { }
+ /* GenericInserted */ .chroma .gi { color:#a6e22e }
+ /* GenericOutput */ .chroma .go { }
+ /* GenericPrompt */ .chroma .gp { }
+ /* GenericStrong */ .chroma .gs { font-weight:bold }
+ /* GenericSubheading */ .chroma .gu { color:#75715e }
+ /* GenericTraceback */ .chroma .gt { }
+ /* GenericUnderline */ .chroma .gl { }
+ /* TextWhitespace */ .chroma .w { }
}
@if $codeblock_copy_btn_enable {
@@ -76,17 +175,15 @@
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
padding-top: 30px;
- .table-container {
- border-radius: 0 0 5px 5px;
- }
-
- &::before {
- background: #fc625d;
- box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
- margin-top: -20px;
- margin-left: 10px;
- position: absolute;
- @include round-icon(12px);
- }
+ > div {
+ &::before {
+ background: #fc625d;
+ box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
+ margin-top: -20px;
+ margin-left: 10px;
+ position: absolute;
+ @include round-icon(12px);
+ }
+ }
}
}
\ No newline at end of file
diff --git a/assets/js/3rd/others/clipboard.js b/assets/js/3rd/others/clipboard.js
index 8862e2b..02985cc 100644
--- a/assets/js/3rd/others/clipboard.js
+++ b/assets/js/3rd/others/clipboard.js
@@ -1,37 +1,35 @@
/* clipboard plugin */
-NexT.plugins.others.clipboard = function() {
+NexT.plugins.others.clipboard = function () {
const clipboard_js = NexT.utils.getCDNResource(NexT.CONFIG.page.clipboard.js);
- NexT.utils.getScript(clipboard_js, function(){
+ NexT.utils.getScript(clipboard_js, function () {
let figure = document.querySelectorAll('.highlight pre');
if (figure.length === 0 || !NexT.CONFIG.copybtn) return;
+
+ /** Add copy button DOM. **/
figure.forEach(element => {
- let cn = element.querySelector('code').className;
+ let cn = element.querySelector('code').className;
if (cn === '') return;
- element.children[0].insertAdjacentHTML('beforebegin', '
');
- var clipboard = new ClipboardJS(element.children[0],
- {
- text: function(trigger) {
- return trigger.nextElementSibling.textContent.trim();
- }
- });
- clipboard.on('success', function (e) {
- e.clearSelection();
- button.querySelector('i').className = 'fa fa-check-circle fa-fw';
- });
+ element.insertAdjacentHTML('beforeend', '
');
+ });
- clipboard.on('error', function (e) {
- console.error('Copy failed:', e);
- button.querySelector('i').className = 'fa fa-times-circle fa-fw';
- });
+ /** Register the clipboard event. **/
+ var clipboard = new ClipboardJS('.copy-btn', {
+ text: function (trigger) {
+ // TODO: Why there clipboard default text content with enter?
+ return trigger.previousElementSibling.textContent.trim();
+ }
+ });
- const button = element.querySelector('.copy-btn');
- element.addEventListener('mouseleave', () => {
- setTimeout(() => {
- button.querySelector('i').className = 'fa fa-copy fa-fw';
- }, 300);
- });
+ clipboard.on('success', function (e) {
+ e.clearSelection();
+ e.trigger.querySelector('i').className = 'fa fa-fw fa-check-circle';
+ });
+
+ clipboard.on('error', function (e) {
+ console.error('Copy failed:', e);
+ e.trigger.querySelector('i').className = 'fa fa-fw fa-times-circle';
});
});
}
\ No newline at end of file
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index ffc19d5..2ec80a4 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -39,25 +39,15 @@ markup:
goldmark:
renderer:
unsafe: true
+ # 高亮代码的样式
+ # Highlight style of code
highlight:
- # # 高亮代码的样式名称，可选：monokai | emacs | api | dracula | friendly
- # # 更多的样式：https://xyproto.github.io/splash/docs/all.html
- # # Highlight style: monokai | emacs | api | dracula | friendly
- # # More: https://xyproto.github.io/splash/docs/all.html
- # style: "monokai"
anchorLineNos: true
codeFences: true
guessSyntax: true
- hl_Lines: ""
- hl_inline: false
- lineAnchors: ""
- lineNoStart: 1
- lineNos: false
- lineNumbersInTable: false
- noClasses: true
- noHl: false
- style: monokai
- tabWidth: 2
+ lineNos: true
+ lineNumbersInTable: true
+ noClasses: false
tableOfContents:
# 开始/结束标题级别：1-6 (建议从2开始)
# Heading title level of start or end: 1-6
diff --git a/exampleSite/content/post/syntax-highlighting.md b/exampleSite/content/post/syntax-highlighting.md
index eafb9fb..f946f7d 100644
--- a/exampleSite/content/post/syntax-highlighting.md
+++ b/exampleSite/content/post/syntax-highlighting.md
@@ -27,6 +27,23 @@ Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用
### GO
+```makrdown
+{{}}
+
+func GetTitleFunc(style string) func(s string) string {
+ switch strings.ToLower(style) {
+ case "go":
+ return strings.Title
+ case "chicago":
+ return transform.NewTitleConverter(transform.ChicagoStyle)
+ default:
+ return transform.NewTitleConverter(transform.APStyle)
+ }
+}
+
+{{}}
+```
+
{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
func GetTitleFunc(style string) func(s string) string {
@@ -48,14 +65,14 @@ func GetTitleFunc(style string) func(s string) string {
import javax.swing.JFrame; //Importing class JFrame
import javax.swing.JLabel; //Importing class JLabel
public class HelloWorld {
- public static void main(String[] args) {
- JFrame frame = new JFrame(); //Creating frame
- frame.setTitle("Hi!"); //Setting title frame
- frame.add(new JLabel("Hello, world!"));//Adding text to frame
- frame.pack(); //Setting size to smallest
- frame.setLocationRelativeTo(null); //Centering frame
- frame.setVisible(true); //Showing frame
- }
+ public static void main(String[] args) {
+ JFrame frame = new JFrame(); //Creating frame
+ frame.setTitle("Hi!"); //Setting title frame
+ frame.add(new JLabel("Hello, world!"));//Adding text to frame
+ frame.pack(); //Setting size to smallest
+ frame.setLocationRelativeTo(null); //Centering frame
+ frame.setVisible(true); //Showing frame
+ }
}
```
@@ -143,5 +160,30 @@ FROM
WHERE column_name = "condition"
{{< / highlight >}}
+### 自动猜测代码高亮显示
+
+```
+.highlight {
+
+ // 其他代码
+ ......
+
+ > .chroma {
+ position: relative;
+
+
+ // 修复代码块溢出问题
+ pre {
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+ line-break: anywhere;
+ word-break: break-all;
+ overflow-x: auto;
+ }
+ }
+ }
+}
+```
+
除以上列举的代码高亮显示外，还支持诸如：C 语言、C++、HTML、CSS、Shell脚本等各主流的代码语言高亮显示，可自行测试效果。
\ No newline at end of file