From aa01ececa012af5a1ed76c0927c94c6a42f8708b Mon Sep 17 00:00:00 2001 From: Dillon Date: Mon, 10 Feb 2020 20:34:57 +0800 Subject: [PATCH] feat(highlight): improve syntax style --- assets/css/_partial/_post/_code.scss | 249 ++++++--------------- assets/css/_variables.scss | 202 +++++++++++++++-- assets/js/blog.js | 17 ++ exampleSite/zh/content/posts/test.md | 322 --------------------------- 4 files changed, 260 insertions(+), 530 deletions(-) delete mode 100644 exampleSite/zh/content/posts/test.md diff --git a/assets/css/_partial/_post/_code.scss b/assets/css/_partial/_post/_code.scss index 63ce97f3..e45b0b92 100644 --- a/assets/css/_partial/_post/_code.scss +++ b/assets/css/_partial/_post/_code.scss @@ -1,43 +1,35 @@ -code, -pre { +code { font-size: $code-font-size; font-family: $code-font-family; + padding: .2rem .4rem; color: $code-color; - padding: 5px; - background: $code-background-color; .dark-theme & { color: $code-color-dark; + } +} + +code, pre, .highlight table, .highlight tr, .highlight td { + background: $code-background-color; + + .dark-theme & { background: $code-background-color-dark; } } -.highlight > pre.chroma { - padding: 38px 7px 8px; - overflow-x: auto; -} - .highlight > .chroma { - margin: 1em 0; - position: relative; - font-family: $code-font-family; + margin: 1rem 0; + line-height: round($code-font-size * 1.4); - code { + code, pre { + margin: 0; padding: 0; } - pre { - margin: 0; - padding: 38px 7px 8px; - overflow-x: visible; - } - - &::after { - position: absolute; - top: 0; - right: 0; - left: 0; - padding: 2px 7px; + &::before { + display: block; + padding: .4rem; + font-family: $global-font-family; font-size: $code-font-size; font-weight: bold; color: $code-info-color; @@ -51,184 +43,67 @@ pre { } @each $type, $text in $code-type-map { - &.#{$type}::after { + &.#{$type}::before { content: $text; } } - .lntd { - // Fix code block null line height and - // Synchronous gutter and code line highly. - line-height: round($code-font-size * 1.5); - - &:first-child { - width: 10px; - } - - &:last-child { - vertical-align: top; - } - } - table, tr, td { margin: 0; - padding: 0; - width: 100%; - border-collapse: collapse; - border-color: $code-background-color; + border: none !important; + } - .dark-theme & { - border-color: $code-background-color-dark; + td { + padding: .2rem .4rem; + } + + .lntd { + &:first-child { + width: 1.2rem; + + /* LineNumbersTable */ + .lnt { + color: $code-info-color; + } + + /* LineHighlight */ + .hl { + font-weight: bolder; + } } - } - /* LineNumbersTable */ - .lnt { - color: $code-info-color; - } + &:last-child { + /* LineHighlight */ + .hl { + display: block; + background-color: darken($code-background-color, 5%); - /* LineHighlight */ - .hl { - display: block; - background-color: darken($code-background-color, 5%); - - .dark-theme & { - background-color: darken($code-background-color-dark, 5%); + .dark-theme & { + background-color: darken($code-background-color-dark, 5%); + } + } } } } .highlight { - /* Parentheses */ .p { color: #A9A9B3 } - /* Keyword */ .k { color: #859900 } - /* KeywordConstant */ .kc { color: #859900; font-weight: bold } - /* KeywordDeclaration */ .kd { color: #859900 } - /* KeywordNamespace */ .kn { color: #dc322f; font-weight: bold } - /* KeywordPseudo */ .kp { color: #859900 } - /* KeywordReserved */ .kr { color: #859900 } - /* KeywordType */ .kt { color: #859900; font-weight: bold } - /* Name */ .n { color: #268bd2 } - /* NameAttribute */ .na { color: #268bd2 } - /* NameBuiltin */ .nb { color: #cb4b16 } - /* NameBuiltinPseudo */ .bp { color: #268bd2 } - /* NameClass */ .nc { color: #cb4b16 } - /* NameConstant */ .no { color: #268bd2 } - /* NameDecorator */ .nd { color: #268bd2 } - /* NameEntity */ .ni { color: #268bd2 } - /* NameException */ .ne { color: #268bd2 } - /* NameFunction */ .nf { color: #268bd2 } - /* NameFunctionMagic */ .fm { color: #268bd2 } - /* NameLabel */ .nl { color: #268bd2 } - /* NameNamespace */ .nn { color: #268bd2 } - /* NameOther */ .nx { color: #268bd2 } - /* NameProperty */ .py { color: #268bd2 } - /* NameTag */ .nt { color: #268bd2; font-weight: bold } - /* NameVariable */ .nv { color: #268bd2 } - /* NameVariableClass */ .vc { color: #268bd2 } - /* NameVariableGlobal */ .vg { color: #268bd2 } - /* NameVariableInstance */ .vi { color: #268bd2 } - /* NameVariableMagic */ .vm { color: #268bd2 } - /* Literal */ .l { color: #2aa198 } - /* LiteralDate */ .ld { color: #2aa198 } - /* LiteralString */ .s { color: #2aa198 } - /* LiteralStringAffix */ .sa { color: #2aa198 } - /* LiteralStringBacktick */ .sb { color: #2aa198 } - /* LiteralStringChar */ .sc { color: #2aa198 } - /* LiteralStringDelimiter */ .dl { color: #2aa198 } - /* LiteralStringDoc */ .sd { color: #2aa198 } - /* LiteralStringDouble */ .s2 { color: #2aa198 } - /* LiteralStringEscape */ .se { color: #2aa198 } - /* LiteralStringHeredoc */ .sh { color: #2aa198 } - /* LiteralStringInterpol */ .si { color: #2aa198 } - /* LiteralStringOther */ .sx { color: #2aa198 } - /* LiteralStringRegex */ .sr { color: #2aa198 } - /* LiteralStringSingle */ .s1 { color: #2aa198 } - /* LiteralStringSymbol */ .ss { color: #2aa198 } - /* LiteralNumber */ .m { color: #2aa198; font-weight: bold } - /* LiteralNumberBin */ .mb { color: #2aa198; font-weight: bold } - /* LiteralNumberFloat */ .mf { color: #2aa198; font-weight: bold } - /* LiteralNumberHex */ .mh { color: #2aa198; font-weight: bold } - /* LiteralNumberInteger */ .mi { color: #2aa198; font-weight: bold } - /* LiteralNumberIntegerLong */ .il { color: #2aa198; font-weight: bold } - /* LiteralNumberOct */ .mo { color: #2aa198; font-weight: bold } - /* OperatorWord */ .ow { color: #859900 } - /* Comment */ .c { color: #93a1a1; font-style: italic } - /* CommentHashbang */ .ch { color: #93a1a1; font-style: italic } - /* CommentMultiline */ .cm { color: #93a1a1; font-style: italic } - /* CommentSingle */ .c1 { color: #93a1a1; font-style: italic } - /* CommentSpecial */ .cs { color: #93a1a1; font-style: italic } - /* CommentPreproc */ .cp { color: #93a1a1; font-style: italic } - /* CommentPreprocFile */ .cpf { color: #93a1a1; font-style: italic } - /* Generic */ .g { color: #d33682 } - /* GenericDeleted */ .gd { color: #b58900 } - /* GenericEmph */ .ge { color: #d33682 } - /* GenericError */ .gr { color: #d33682 } - /* GenericHeading */ .gh { color: #d33682 } - /* GenericInserted */ .gi { color: #859900 } - /* GenericOutput */ .go { color: #d33682 } - /* GenericPrompt */ .gp { color: #d33682 } - /* GenericStrong */ .gs { color: #d33682 } - /* GenericSubheading */ .gu { color: #d33682 } - /* GenericTraceback */ .gt { color: #d33682 } + font-family: $code-font-family; + /* Comment */ .c, + /* CommentHashbang */ .ch, + /* CommentMultiline */ .cm, + /* CommentSingle */ .c1, + /* CommentSpecial */ .cs, + /* CommentPreproc */ .cp, + /* CommentPreprocFile */ .cpf { font-style: italic } + /* GenericUnderline */ .gl { text-decoration: underline } + + @each $class, $color in $code-highlight-color-map { + .#{$class} { color: $color; } + } .dark-theme & { - background: $code-background-color-dark; - - /* Parentheses */ .p { color: #A9A9B3 } - /* Keyword */ .k { color: #D371E3 } - /* KeywordConstant */ .kc { color: #D371E3 } - /* KeywordDeclaration */ .kd { color: #D371E3 } - /* KeywordNamespace */ .kn { color: #D371E3 } - /* KeywordPseudo */ .kp { color: #D371E3 } - /* KeywordReserved */ .kr { color: #D371E3 } - /* KeywordType */ .kt { color: #8be9fd } - /* NameAttribute */ .na { color: #41B1F5 } - /* NameBuiltin */ .nb { color: #8be9fd; font-style: italic } - /* NameClass */ .nc { color: #E5BF78 } - /* NameFunction */ .nf { color: #19B8C0 } - /* NameX */ .nx { color: #F16473 } - /* NameLabel */ .nl { color: #8be9fd; font-style: italic } - /* NameTag */ .nt { color: #D371E3 } - /* NameVariable */ .nv { color: #8be9fd; font-style: italic } - /* NameVariableClass */ .vc { color: #8be9fd; font-style: italic } - /* NameVariableGlobal */ .vg { color: #8be9fd; font-style: italic } - /* NameVariableInstance */ .vi { color: #8be9fd; font-style: italic } - /* LiteralString */ .s { color: #8BC56F } - /* LiteralStringAffix */ .sa { color: #8BC56F } - /* LiteralStringBacktick */ .sb { color: #8BC56F } - /* LiteralStringChar */ .sc { color: #8BC56F } - /* LiteralStringDelimiter */ .dl { color: #8BC56F } - /* LiteralStringDoc */ .sd { color: #8BC56F } - /* LiteralStringDouble */ .s2 { color: #8BC56F } - /* LiteralStringEscape */ .se { color: #8BC56F } - /* LiteralStringHeredoc */ .sh { color: #8BC56F } - /* LiteralStringInterpol */ .si { color: #8BC56F } - /* LiteralStringOther */ .sx { color: #8BC56F } - /* LiteralStringRegex */ .sr { color: #8BC56F } - /* LiteralStringSingle */ .s1 { color: #8BC56F } - /* LiteralStringSymbol */ .ss { color: #8BC56F } - /* LiteralNumber */ .m { color: #bd93f9 } - /* LiteralNumberBin */ .mb { color: #bd93f9 } - /* LiteralNumberFloat */ .mf { color: #bd93f9 } - /* LiteralNumberHex */ .mh { color: #bd93f9 } - /* LiteralNumberInteger */ .mi { color: #bd93f9 } - /* LiteralNumberIntegerLong */ .il { color: #bd93f9 } - /* LiteralNumberOct */ .mo { color: #bd93f9 } - /* Operator */ .o { color: #D371E3 } - /* OperatorWord */ .ow { color: #D371E3 } - /* Comment */ .c { color: #7E848F } - /* CommentHashbang */ .ch { color: #7E848F } - /* CommentMultiline */ .cm { color: #7E848F } - /* CommentSingle */ .c1 { color: #7E848F } - /* CommentSpecial */ .cs { color: #7E848F } - /* CommentPreproc */ .cp { color: #D371E3 } - /* CommentPreprocFile */ .cpf { color: #D371E3 } - /* GenericDeleted */ .gd { color: #8b080b } - /* GenericEmph */ .ge { text-decoration: underline } - /* GenericHeading */ .gh { font-weight: bold } - /* GenericInserted */ .gi { font-weight: bold } - /* GenericOutput */ .go { color: #44475a } - /* GenericSubheading */ .gu { font-weight: bold } - /* GenericUnderline */ .gl { text-decoration: underline } + @each $class, $color in $code-highlight-color-map-dark { + .#{$class} { color: $color; } + } } } diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index 00b4af55..2161d1e1 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -110,48 +110,207 @@ $code-type-map: ( language-c: 'C', language-cs: 'C#', language-cpp: 'C++', - language-css: 'CSS', + language-clojure: 'Clojure', language-coffeescript: 'CoffeeScript', - language-html: 'HTML', - language-xml: 'XML', - language-http: 'HTTP', - language-json: 'JSON', - language-java: 'Java', - language-js: 'JavaScript', - language-javascript: 'JavaScript', - language-makefile: 'Makefile', - language-markdown: 'Markdown', - language-objectivec: 'Objective-C', - language-php: 'PHP', - language-perl: 'Perl', - language-python: 'Python', - language-ruby: 'Ruby', - language-sql: 'SQL', - language-shell: 'Shell', + language-css: 'CSS', + language-dart: 'Dart', + language-diff: 'Diff', language-erlang: 'Erlang', language-go: 'Go', language-go-html-template: 'Go HTML Template', language-groovy: 'Groovy', language-haskell: 'Haskell', + language-html: 'HTML', + language-http: 'HTTP', + language-xml: 'XML', + language-java: 'Java', + language-js: 'JavaScript', + language-javascript: 'JavaScript', + language-json: 'JSON', language-kotlin: 'Kotlin', - language-clojure: 'Clojure', + language-latex: 'LaTeX', language-less: 'Less', language-lisp: 'Lisp', language-lua: 'Lua', + language-makefile: 'Makefile', + language-markdown: 'Markdown', language-matlab: 'Matlab', + language-objectivec: 'Objective-C', + language-php: 'PHP', + language-perl: 'Perl', + language-python: 'Python', + language-r: 'R', + language-ruby: 'Ruby', language-rust: 'Rust', - language-scss: 'Scss', language-scala: 'Scala', + language-scss: 'Scss', + language-shell: 'Shell', + language-sql: 'SQL', language-swift: 'Swift', + language-tex: 'TeX', + language-toml: 'TOML', + language-ts: 'TypeScript', language-typescript: 'TypeScript', + language-vue: 'Vue', language-yml: 'YAML', language-yaml: 'YAML', - language-toml: 'TOML', - language-diff: 'Diff', +) !default; + +// Color map of the code highlight +$code-highlight-color-map: ( + /* Parentheses */ 'p': #a9a9b3, + /* Keyword */ 'k': #b501a9, + /* KeywordConstant */ 'kc': #b501a9, + /* KeywordDeclaration */ 'kd': #b501a9, + /* KeywordNamespace */ 'kn': #b501a9, + /* KeywordPseudo */ 'kp': #b501a9, + /* KeywordReserved */ 'kr': #b501a9, + /* KeywordType */ 'kt': #b501a9, + /* Name */ 'n': #333333, + /* NameAttribute */ 'na': #2b77fa, + /* NameBuiltin */ 'nb': #f74840, + /* NameBuiltinPseudo */ 'bp': #f74840, + /* NameClass */ 'nc': #cb8100, + /* NameConstant */ 'no': #2b77fa, + /* NameDecorator */ 'nd': #0086c1, + /* NameEntity */ 'ni': #2b77fa, + /* NameException */ 'ne': #2b77fa, + /* NameFunction */ 'nf': #2b77fa, + /* NameFunctionMagic */ 'fm': #1ccad6, + /* NameLabel */ 'nl': #2b77fa, + /* NameNamespace */ 'nn': #2b77fa, + /* NameOther */ 'nx': #333333, + /* NameProperty */ 'py': #2b77fa, + /* NameTag */ 'nt': #2b77fa, + /* NameVariable */ 'nv': #2b77fa, + /* NameVariableClass */ 'vc': #2b77fa, + /* NameVariableGlobal */ 'vg': #2b77fa, + /* NameVariableInstance */ 'vi': #2b77fa, + /* NameVariableMagic */ 'vm': #2b77fa, + /* Literal */ 'l': #2aa198, + /* LiteralDate */ 'ld': #2aa198, + /* LiteralString */ 's': #24a443, + /* LiteralStringAffix */ 'sa': #24a443, + /* LiteralStringBacktick */ 'sb': #24a443, + /* LiteralStringChar */ 'sc': #24a443, + /* LiteralStringDelimiter */ 'dl': #24a443, + /* LiteralStringDoc */ 'sd': #24a443, + /* LiteralStringDouble */ 's2': #24a443, + /* LiteralStringEscape */ 'se': #24a443, + /* LiteralStringHeredoc */ 'sh': #24a443, + /* LiteralStringInterpol */ 'si': #24a443, + /* LiteralStringOther */ 'sx': #24a443, + /* LiteralStringRegex */ 'sr': #24a443, + /* LiteralStringSingle */ 's1': #24a443, + /* LiteralStringSymbol */ 'ss': #24a443, + /* LiteralNumber */ 'm': #e2893c, + /* LiteralNumberBin */ 'mb': #e2893c, + /* LiteralNumberFloat */ 'mf': #e2893c, + /* LiteralNumberHex */ 'mh': #e2893c, + /* LiteralNumberInteger */ 'mi': #e2893c, + /* LiteralNumberIntegerLong */ 'il': #e2893c, + /* LiteralNumberOct */ 'mo': #e2893c, + /* Operator */ 'o': #f19b04, + /* OperatorWord */ 'ow': #b501a9, + /* Comment */ 'c': #a0a1a8, + /* CommentHashbang */ 'ch': #a0a1a8, + /* CommentMultiline */ 'cm': #a0a1a8, + /* CommentSingle */ 'c1': #a0a1a8, + /* CommentSpecial */ 'cs': #a0a1a8, + /* CommentPreproc */ 'cp': #a0a1a8, + /* CommentPreprocFile */ 'cpf': #a0a1a8, + /* Generic */ 'g': #e72d40, + /* GenericDeleted */ 'gd': #e72d40, + /* GenericEmph */ 'ge': #e72d40, + /* GenericError */ 'gr': #e72d40, + /* GenericHeading */ 'gh': #e72d40, + /* GenericInserted */ 'gi': #e72d40, + /* GenericOutput */ 'go': #e72d40, + /* GenericPrompt */ 'gp': #e72d40, + /* GenericStrong */ 'gs': #e72d40, + /* GenericSubheading */ 'gu': #e72d40, + /* GenericTraceback */ 'gt': #e72d40, + /* TextWhitespace */ 'w': #bbbbbb, +) !default; +$code-highlight-color-map-dark: ( + /* Parentheses */ 'p': #a9a9b3, + /* Keyword */ 'k': #d371e3, + /* KeywordConstant */ 'kc': #d371e3, + /* KeywordDeclaration */ 'kd': #d371e3, + /* KeywordNamespace */ 'kn': #d371e3, + /* KeywordPseudo */ 'kp': #d371e3, + /* KeywordReserved */ 'kr': #d371e3, + /* KeywordType */ 'kt': #d371e3, + /* Name */ 'n': #a9b2c0, + /* NameAttribute */ 'na': #41b0f5, + /* NameBuiltin */ 'nb': #19b9c4, + /* NameBuiltinPseudo */ 'bp': #ecbf6f, + /* NameClass */ 'nc': #ecbf6f, + /* NameConstant */ 'no': #41b0f5, + /* NameDecorator */ 'nd': #ecbf6f, + /* NameEntity */ 'ni': #41b0f5, + /* NameException */ 'ne': #41b0f5, + /* NameFunction */ 'nf': #41b0f5, + /* NameFunctionMagic */ 'fm': #19b9c4, + /* NameLabel */ 'nl': #41b0f5, + /* NameNamespace */ 'nn': #41b0f5, + /* NameOther */ 'nx': #a9a9b3, + /* NameProperty */ 'py': #41b0f5, + /* NameTag */ 'nt': #41b0f5, + /* NameVariable */ 'nv': #41b0f5, + /* NameVariableClass */ 'vc': #41b0f5, + /* NameVariableGlobal */ 'vg': #41b0f5, + /* NameVariableInstance */ 'vi': #41b0f5, + /* NameVariableMagic */ 'vm': #41b0f5, + /* Literal */ 'l': #2aa198, + /* LiteralDate */ 'ld': #2aa198, + /* LiteralString */ 's': #8cc570, + /* LiteralStringAffix */ 'sa': #8cc570, + /* LiteralStringBacktick */ 'sb': #8cc570, + /* LiteralStringChar */ 'sc': #8cc570, + /* LiteralStringDelimiter */ 'dl': #8cc570, + /* LiteralStringDoc */ 'sd': #8cc570, + /* LiteralStringDouble */ 's2': #8cc570, + /* LiteralStringEscape */ 'se': #8cc570, + /* LiteralStringHeredoc */ 'sh': #8cc570, + /* LiteralStringInterpol */ 'si': #8cc570, + /* LiteralStringOther */ 'sx': #8cc570, + /* LiteralStringRegex */ 'sr': #8cc570, + /* LiteralStringSingle */ 's1': #8cc570, + /* LiteralStringSymbol */ 'ss': #8cc570, + /* LiteralNumber */ 'm': #db985c, + /* LiteralNumberBin */ 'mb': #db985c, + /* LiteralNumberFloat */ 'mf': #db985c, + /* LiteralNumberHex */ 'mh': #db985c, + /* LiteralNumberInteger */ 'mi': #db985c, + /* LiteralNumberIntegerLong */ 'il': #db985c, + /* LiteralNumberOct */ 'mo': #db985c, + /* Operator */ 'o': #ecbf6f, + /* OperatorWord */ 'ow': #d371e3, + /* Comment */ 'c': #7e848f, + /* CommentHashbang */ 'ch': #7e848f, + /* CommentMultiline */ 'cm': #7e848f, + /* CommentSingle */ 'c1': #7e848f, + /* CommentSpecial */ 'cs': #7e848f, + /* CommentPreproc */ 'cp': #7e848f, + /* CommentPreprocFile */ 'cpf': #7e848f, + /* Generic */ 'g': #f16372, + /* GenericDeleted */ 'gd': #f16372, + /* GenericEmph */ 'ge': #f16372, + /* GenericError */ 'gr': #f16372, + /* GenericHeading */ 'gh': #f16372, + /* GenericInserted */ 'gi': #f16372, + /* GenericOutput */ 'go': #f16372, + /* GenericPrompt */ 'gp': #f16372, + /* GenericStrong */ 'gs': #f16372, + /* GenericSubheading */ 'gu': #f16372, + /* GenericTraceback */ 'gt': #f16372, + /* TextWhitespace */ 'w': #bbbbbb, ) !default; // ========== Code ========== // // ========== Admonition ========== // +// Color map of the admonition $admonition-color-map: ( 'note': #448aff, 'abstract': #00b0ff, @@ -167,6 +326,7 @@ $admonition-color-map: ( 'quote': #9e9e9e, ) !default; +// Color map of the admonition background $admonition-background-color-map: ( 'note': rgba(68,138,255,.1), 'abstract': rgba(0,176,255,.1), diff --git a/assets/js/blog.js b/assets/js/blog.js index 81b81d0d..a35b2f26 100644 --- a/assets/js/blog.js +++ b/assets/js/blog.js @@ -82,6 +82,23 @@ jQuery(function($) { const lang = code ? code.className.toLowerCase() : ''; block.className += ' ' + lang; } + + const nolinenosBlocks = document.querySelectorAll('.highlight > pre.chroma'); + for (let i = 0; i < nolinenosBlocks.length; i++) { + const block = nolinenosBlocks[i]; + const chroma = document.createElement('div'); + chroma.className = block.className; + const table = document.createElement('table'); + chroma.appendChild(table); + const tbody = document.createElement('tbody'); + table.appendChild(tbody); + const tr = document.createElement('tr'); + tbody.appendChild(tr); + const td = document.createElement('td'); + tr.appendChild(td); + block.parentElement.replaceChild(chroma, block); + td.appendChild(block); + } }; _Blog.responsiveTable = function() { diff --git a/exampleSite/zh/content/posts/test.md b/exampleSite/zh/content/posts/test.md deleted file mode 100644 index f2a59ec6..00000000 --- a/exampleSite/zh/content/posts/test.md +++ /dev/null @@ -1,322 +0,0 @@ ---- -author: "" -author_link: "" -title: "Test Page" -date: 2019-08-04T22:49:56+08:00 -lastmod: 2019-08-17T22:41:56+08:00 -draft: true -description: "This is a test page." -show_in_homepage: false -description_as_summary: false -license: "" - -tags: [ - "Hugo", - "主题", -] -categories: [ - "预览", -] - -featured_image: "" -featured_image_preview: "" - -comment: false -toc: true -auto_collapse_toc: true -math: true -dev: true ---- - -## This is a test page - -Test all features in development[^link test]. - -[^link test]: https://www.google.com/ - - - -## Test ECharts - -{{< dev/echarts >}} -title : { - text: '某站点用户访问来源', - subtext: '纯属虚构', - x:'center' -}, -tooltip : { - trigger: 'item', - formatter: "{a}
{b} : {c} ({d}%)" -}, -legend: { - orient: 'vertical', - left: 'left', - data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] -}, -series : [ - { - name: '访问来源', - type: 'pie', - radius : '55%', - center: ['50%', '60%'], - data:[ - {value:335, name:'直接访问'}, - {value:310, name:'邮件营销'}, - {value:234, name:'联盟广告'}, - {value:135, name:'视频广告'}, - {value:1548, name:'搜索引擎'} - ], - itemStyle: { - emphasis: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)' - } - } - } -] -{{< /dev/echarts >}} - -## Test Mermaid - -{{< mermaid >}} -classDiagram - Animal <|-- Duck - Animal <|-- Fish - Animal <|-- Zebra - Animal : +int age - Animal : +String gender - Animal: +isMammal() - Animal: +mate() - class Duck{ - +String beakColor - +swim() - +quack() - } - class Fish{ - -int sizeInFeet - -canEat() - } - class Zebra{ - +bool is_wild - +run() - } -{{< /mermaid >}} - -## Test Ruby - -人最重要的特点是会思考，建站初衷无非是保存思维的电子快照。 -当然各种文档工具亦或是简单的文本编辑器也能随时记录点滴， -选择建个人网站无非是想满足 [技术爱好者]^(Technology enthusiast) 的偏执。 - -## Test Music - -## Test Toc - -Toc - -### Toc1 - -Toc - -#### Toc 1-1 - -Toc - -#### Toc 1-2 - -Toc - -#### Toc 1-3 - -Toc - -### Toc2 - -Toc - -#### Toc 2-1 - -Toc - -#### Toc 2-2 - -Toc - -### Toc3 - -Toc - -## Test Table - -| Tables | Are | Cool | -| :------------ |:-------------:| -----:| -| col 3 is | right-aligned | $1600 | -| col 2 is | centered | $12 | -| zebra stripes | are neat | $1 | - -## Test kbd - -ctrl+alt+del - -## Test Mixed Lists - -Mixed Lists - -- item 1 - * [X] item A - * [ ] item B - more text - 1. item a - 2. itemb - 3. item c - * [X] item C -- item 2 -- item 3 - -Really Mixed Lists - -- item 1 - * [X] item A - - item B - more text - 1. item a - + itemb - + [ ] item c - 1. item C -1. item 2 -- [X] item 3 - -## Test fa (Font Awesome) - -:(fab fa-weixin fa-2x): - -## Test Footnote - -This is a footnote[^1] - -[^1]: This is a footnote - -## Test Admonition - -{{% admonition quote %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition quote "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition example "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition bug "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition danger "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition failure "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition warning "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition question "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition success "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition tip "I'm title!" false %}} -biu biu biu. -{{% /admonition %}} - -{{% admonition info "I'm title!" true %}} -**biu biu biu.** -{{% /admonition %}} - -{{% admonition note "I'm title!" false %}} -**biu biu biu.** -{{% /admonition %}} - -{{% admonition type="abstract" title="Test Admonition" %}} -This is a Admonition. -{{% /admonition %}} - -## Test Highlight - -`ls` 命令 - -```go -// You can edit this code! -// Click here and start typing. -package main - -import "fmt" - -func main() { - fmt.Println("Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界", "Hello, 世界") -} -``` - -- This is a list that contains multiple code blocks. - - - Here is an indented block - - ```Code - This will still be parsed - as a normal indented code block. - ``` - - - Here is a fenced code block: - - ```Code - This will still be parsed - as a fenced code block. - ``` - - > ```Code - > Blockquotes? - > Not a problem! - > ``` - -## Test Typeit - -{{< typeit group="test" tag="h3" >}} -Here is a story about love... -{{< /typeit >}} - -{{< typeit group="test" code="java" >}} -u.accepted(); // [2018/01/05](/since/) special -int a = 1; -{{< /typeit >}} - -## Test Img - -![Gif](https://static.dillonzq.com/images/20190817130904-U6cPUk.jpg "Title") - -## Test Align - -{{% align right %}} -**Test Text** -{{% /align %}} - -## Test Katex - -$$ c = \pm\sqrt{a^2 + b^2} $$ - -Left \\( c = \pm\sqrt{a^2 + b^2} \\) Right - -Left $ c = \pm\sqrt{a^2 + b^2} $ Right - -$ \ce{CO2 + C -> 2 CO} $ - -$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $