diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss index b99ae642..775d7971 100644 --- a/assets/css/_core/_base.scss +++ b/assets/css/_core/_base.scss @@ -23,7 +23,7 @@ html { ::-webkit-scrollbar-thumb { background-color: $scrollbar-color; - border-radius: $scrollbar-radius; + border-radius: $global-border-radius; &:hover { background-color: $scrollbar-hover-color; diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss index 29e91c57..ff149afc 100644 --- a/assets/css/_partial/_single/_code.scss +++ b/assets/css/_partial/_single/_code.scss @@ -1,14 +1,15 @@ // inline code -// TODO code { display: inline-block; max-width: 100%; padding: 0 .4rem; - @include overflow-wrap(break-word); - @include line-break(anywhere); font-size: $code-font-size; font-family: $code-font-family; color: $code-color; + background-color: #afb8c133; + border-radius: $global-border-radius;; + @include overflow-wrap(break-word); + @include line-break(anywhere); [theme=dark] & { color: $code-color-dark; @@ -18,8 +19,12 @@ code { // indented code pre { margin: 0; - padding: .25rem 0 .25rem .5rem; + line-height: 1.45; + padding: .5rem; overflow: auto; + font-size: $code-font-size; + font-family: $code-font-family; + border-radius: $global-border-radius; @include tab-size(4); background: $code-background-color; @@ -30,6 +35,9 @@ pre { code { padding: 0; + border-radius: 0; + background-color: transparent; + @include max-content(min-width); } img { @@ -40,8 +48,8 @@ pre { } .highlight, .gist { - font-family: $code-font-family; font-size: $code-font-size; + font-family: $code-font-family; .table-wrapper { > table, @@ -58,7 +66,6 @@ pre { // block fenced code .highlight { - line-height: 1.4em; margin: .5rem 0; > .chroma { @@ -72,8 +79,10 @@ pre { width: 100%; font-family: $global-font-family; font-weight: bold; + border-radius: $global-border-radius; color: $code-info-color; background: darken($code-background-color, 8%); + @include transition(all 0.2s ease); [theme=dark] & { color: $code-info-color-dark; @@ -124,23 +133,6 @@ pre { } } - /* LineTableTD */ - .lntd { - vertical-align: top; - padding: 0; - - // line numbers - &:first-child { - min-width: 1.6rem; - text-align: right; - } - - // code content - &:last-child { - width: 100%; - } - } - /* LineTable */ .lntable { border-spacing: 0; @@ -148,44 +140,96 @@ pre { overflow: auto; display: block; + background: $code-background-color; + + [theme=dark] & { + background: $code-background-color-dark; + } + + /* LineTableTD */ + .lntd { + vertical-align: top; + padding: 0; + + // line numbers + &:first-child { + min-width: 1.6rem; + text-align: right; + + pre { + padding: .25rem; + } + + /* LineNumbers */ + .ln { + padding-right: .75rem; + } + + /* LineNumbersTable */ + .lnt, .ln { + color: $global-font-secondary-color; + + [theme=dark] & { + color: $global-font-secondary-color-dark; + } + } + } + + // code content + &:last-child { + width: 100%; + + pre { + padding: .25rem .5rem .25rem .25rem; + + code { + width: 100%; + } + } + + /* LineHighlight */ + .hl { + display: block; + background-color: #fff8c5; + box-shadow: -2px 0 0 #edd88b; + + [theme=dark] & { + background-color: darken($code-background-color-dark, 5%); + } + } + + /* GenericUnderline */ + .gl { + text-decoration: underline; + } + /* GenericStrong */ + .gs { + font-weight: bold; + } + /* GenericEmph */ + .ge { + font-style: italic; + } + } + } + pre { - @include max-content(min-width); + border-radius: 0; } - } - /* LineNumbers */ - .ln { - padding-right: .75rem; - } - - /* LineHighlight */ - .hl { - display: block; - background-color: darken($code-background-color, 10%); - - [theme=dark] & { - background-color: darken($code-background-color-dark, 5%); - } - } - - /* LineNumbersTable */ - .ln, .lnt { - color: $global-font-secondary-color; - - [theme=dark] & { - color: $global-font-secondary-color-dark; - } } .table-wrapper { max-height: 0; - overflow-y: hidden; + overflow: hidden; + border-radius: 0 0 $global-border-radius $global-border-radius; @include details-transition-open; } &.open { .code-header { background: darken($code-background-color, 3%); + border-radius: $global-border-radius $global-border-radius 0 0; [theme=dark] & { background: darken($code-background-color-dark, 3%); @@ -211,14 +255,21 @@ pre { } } + // ========== Higtlight Color ========== // + /* Error */ .err { - color: $code-error-color; - background-color: $code-error-background-color; + font-style: italic; + border-bottom: 1px dotted $code-error-color; + } + /* GenericDeleted */ + .gd { + background-color: #ffebe9; + } + /* GenericInserted */ + .gi { + background-color: #dafbe1; } - - /* GenericEmph */ .ge { font-style: italic } - /* GenericStrong */ .gs { font-weight: bold } @each $class, $color in $code-highlight-color-map { .#{$class} { color: $color; } @@ -229,6 +280,7 @@ pre { .#{$class} { color: $color; } } } + // ========== Higtlight Color ========== // } // gist shortcode diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss index 878fbbf5..44cc8575 100644 --- a/assets/css/_variables.scss +++ b/assets/css/_variables.scss @@ -9,6 +9,9 @@ $global-font-size: 16px; $global-font-weight: 400; $global-line-height: 1.5rem; +// Radius of the border +$global-border-radius: 5px !default; + // Color of the background $global-background-color: #fff !default; $global-background-color-dark: #292a2d !default; @@ -40,9 +43,6 @@ $scrollbar-color: #87878d !default; // Color of the hover scrollbar $scrollbar-hover-color: #a9a9b3 !default; - -// radius of the scrollbar -$scrollbar-radius: 5px !default; // ========== Scrollbar ========== // // ========== Selection ========== // @@ -110,15 +110,14 @@ $pagination-link-hover-color-dark: #fff !default; // ========== Code ========== // // Color of the code -$code-color: #E74C3C !default; +$code-color: #24292f !default; $code-color-dark: #E5BF78 !default; // Color of the code background -$code-background-color: #f5f5f5 !default; +$code-background-color: #f6f8fa !default; $code-background-color-dark: #272C34 !default; -$code-error-color: #ef6155 !default; -$code-error-background-color: #2f1e2e !default; +$code-error-color: #dc3545 !default; $code-info-color: #9c9c9c !default; $code-info-color-dark: #b1b0b0 !default; @@ -184,87 +183,89 @@ $code-type-map: ( // Color map of the code highlight $code-highlight-color-map: ( - /* Keyword */ 'k': #00a8c8, - /* KeywordConstant */ 'kc': #00a8c8, - /* KeywordDeclaration */ 'kd': #00a8c8, - /* KeywordNamespace */ 'kn': #f92672, - /* KeywordPseudo */ 'kp': #00a8c8, - /* KeywordReserved */ 'kr': #00a8c8, - /* KeywordType */ 'kt': #00a8c8, - /* Name */ 'n': #111111, - /* NameAttribute */ 'na': #75af00, - /* NameBuiltin */ 'nb': #111111, - /* NameBuiltinPseudo */ 'bp': #111111, - /* NameClass */ 'nc': #75af00, - /* NameConstant */ 'no': #00a8c8, - /* NameDecorator */ 'nd': #75af00, - /* NameEntity */ 'ni': #111111, - /* NameException */ 'ne': #75af00, - /* NameFunction */ 'nf': #75af00, - /* NameFunctionMagic */ 'fm': #111111, - /* NameLabel */ 'nl': #111111, - /* NameNamespace */ 'nn': #111111, - /* NameOther */ 'nx': #75af00, - /* NameProperty */ 'py': #111111, - /* NameTag */ 'nt': #f92672, - /* NameVariable */ 'nv': #111111, - /* NameVariableClass */ 'vc': #111111, - /* NameVariableGlobal */ 'vg': #111111, - /* NameVariableInstance */ 'vi': #111111, - /* NameVariableMagic */ 'vm': #111111, - /* Literal */ 'l': #ae81ff, - /* LiteralDate */ 'ld': #d88200, - /* LiteralString */ 's': #d88200, - /* LiteralStringAffix */ 'sa': #d88200, - /* LiteralStringBacktick */ 'sb': #d88200, - /* LiteralStringChar */ 'sc': #d88200, - /* LiteralStringDelimiter */ 'dl': #d88200, - /* LiteralStringDoc */ 'sd': #d88200, - /* LiteralStringDouble */ 's2': #d88200, - /* LiteralStringEscape */ 'se': #8045ff, - /* LiteralStringHeredoc */ 'sh': #d88200, - /* LiteralStringInterpol */ 'si': #d88200, - /* LiteralStringOther */ 'sx': #d88200, - /* LiteralStringRegex */ 'sr': #d88200, - /* LiteralStringSingle */ 's1': #d88200, - /* LiteralStringSymbol */ 'ss': #d88200, - /* LiteralNumber */ 'm': #ae81ff, - /* LiteralNumberBin */ 'mb': #ae81ff, - /* LiteralNumberFloat */ 'mf': #ae81ff, - /* LiteralNumberHex */ 'mh': #ae81ff, - /* LiteralNumberInteger */ 'mi': #ae81ff, - /* LiteralNumberIntegerLong */ 'il': #ae81ff, - /* LiteralNumberOct */ 'mo': #ae81ff, - /* Operator */ 'o': #f92672, - /* OperatorWord */ 'ow': #f92672, - /* Punctuation */ 'p': #111111, - /* Comment */ 'c': #75715e, - /* CommentHashbang */ 'ch': #75715e, - /* CommentMultiline */ 'cm': #75715e, - /* CommentSingle */ 'c1': #75715e, - /* CommentSpecial */ 'cs': #75715e, - /* CommentPreproc */ 'cp': #75715e, - /* CommentPreprocFile */ 'cpf': #75715e, + /* Error */ 'err': $code-error-color, + /* Keyword */ 'k': #cf222e, + /* KeywordConstant */ 'kc': #0550ae, + /* KeywordDeclaration */ 'kd': #cf222e, + /* KeywordNamespace */ 'kn': #cf222e, + /* KeywordPseudo */ 'kp': #cf222e, + /* KeywordReserved */ 'kr': #cf222e, + /* KeywordType */ 'kt': #cf222e, + /* Name */ 'n': $code-color, + /* NameAttribute */ 'na': #0550ae, + /* NameBuiltin */ 'nb': #0550ae, + /* NameBuiltinPseudo */ 'bp': $code-color, + /* NameClass */ 'nc': #8250df, + /* NameConstant */ 'no': #cf222e, + /* NameDecorator */ 'nd': #8250df, + /* NameEntity */ 'ni': #0550ae, + /* NameException */ 'ne': #0550ae, + /* NameFunction */ 'nf': #0550ae, + /* NameFunctionMagic */ 'fm': #0550ae, + /* NameLabel */ 'nl': #0550ae, + /* NameNamespace */ 'nn': #8250df, + /* NameOther */ 'nx': $code-color, + /* NameProperty */ 'py': #0550ae, + /* NameTag */ 'nt': #116329, + /* NameVariable */ 'nv': #953800, + /* NameVariableClass */ 'vc': #0550ae, + /* NameVariableGlobal */ 'vg': #0550ae, + /* NameVariableInstance */ 'vi': #0550ae, + /* NameVariableMagic */ 'vm': #0550ae, + /* Literal */ 'l': #0550ae, + /* LiteralDate */ 'ld': #0a3069, + /* LiteralString */ 's': #0a3069, + /* LiteralStringAffix */ 'sa': #0a3069, + /* LiteralStringBacktick */ 'sb': #0a3069, + /* LiteralStringChar */ 'sc': #0a3069, + /* LiteralStringDelimiter */ 'dl': #0a3069, + /* LiteralStringDoc */ 'sd': #0a3069, + /* LiteralStringDouble */ 's2': #0a3069, + /* LiteralStringEscape */ 'se': #0a3069, + /* LiteralStringHeredoc */ 'sh': #0a3069, + /* LiteralStringInterpol */ 'si': #0a3069, + /* LiteralStringOther */ 'sx': #0a3069, + /* LiteralStringRegex */ 'sr': #0a3069, + /* LiteralStringSingle */ 's1': #0a3069, + /* LiteralStringSymbol */ 'ss': #0a3069, + /* LiteralNumber */ 'm': #0550ae, + /* LiteralNumberBin */ 'mb': #0550ae, + /* LiteralNumberFloat */ 'mf': #0550ae, + /* LiteralNumberHex */ 'mh': #0550ae, + /* LiteralNumberInteger */ 'mi': #0550ae, + /* LiteralNumberIntegerLong */ 'il': #0550ae, + /* LiteralNumberOct */ 'mo': #0550ae, + /* Operator */ 'o': #cf222e, + /* OperatorWord */ 'ow': #cf222e, + /* Punctuation */ 'p': $code-color, + /* Comment */ 'c': #6e7781, + /* CommentHashbang */ 'ch': #6e7781, + /* CommentMultiline */ 'cm': #6e7781, + /* CommentSingle */ 'c1': #6e7781, + /* CommentSpecial */ 'cs': #6e7781, + /* CommentPreproc */ 'cp': #0550ae, + /* CommentPreprocFile */ 'cpf': #6e7781, /* Generic */ 'g': $code-color, - /* GenericDeleted */ 'gd': $code-color, + /* GenericDeleted */ 'gd': #82071e, /* GenericEmph */ 'ge': $code-color, - /* GenericError */ 'gr': $code-color, - /* GenericHeading */ 'gh': $code-color, - /* GenericInserted */ 'gi': #75af00, - /* GenericOutput */ 'go': $code-color, - /* GenericPrompt */ 'gp': $code-color, + /* GenericError */ 'gr': $code-error-color, + /* GenericHeading */ 'gh': #999999, + /* GenericInserted */ 'gi': #116329, + /* GenericOutput */ 'go': #888888, + /* GenericPrompt */ 'gp': #555555, /* GenericStrong */ 'gs': $code-color, - /* GenericSubheading */ 'gu': $code-color, - /* GenericTraceback */ 'gt': $code-color, + /* GenericSubheading */ 'gu': #aaaaaa, + /* GenericTraceback */ 'gt': $code-error-color, /* GenericUnderline */ 'gl': $code-color, - /* TextWhitespace */ 'w': $code-color, + /* TextWhitespace */ 'w': #bbbbbb, /* Other */ 'x': $code-color ) !default; $code-highlight-color-map-dark: ( + /* Error */ 'err': $code-error-color, // /* Keyword */ 'k': #66d9ef, /* KeywordConstant */ 'kc': #66d9ef, /* KeywordDeclaration */ 'kd': #66d9ef, - /* KeywordNamespace */ 'kn': #f92672, + /* KeywordNamespace */ 'kn': #116329, /* KeywordPseudo */ 'kp': #66d9ef, /* KeywordReserved */ 'kr': #66d9ef, /* KeywordType */ 'kt': #66d9ef, @@ -281,15 +282,15 @@ $code-highlight-color-map-dark: ( /* NameFunctionMagic */ 'fm': $code-color-dark, /* NameLabel */ 'nl': $code-color-dark, /* NameNamespace */ 'nn': $code-color-dark, - /* NameOther */ 'nx': #a6e22e, + /* NameOther */ 'nx': $code-color-dark, /* NameProperty */ 'py': $code-color-dark, - /* NameTag */ 'nt': #f92672, + /* NameTag */ 'nt': #116329, /* NameVariable */ 'nv': $code-color-dark, /* NameVariableClass */ 'vc': $code-color-dark, /* NameVariableGlobal */ 'vg': $code-color-dark, /* NameVariableInstance */ 'vi': $code-color-dark, /* NameVariableMagic */ 'vm': $code-color-dark, - /* Literal */ 'l': #ae81ff, + /* Literal */ 'l': #0550ae, /* LiteralDate */ 'ld': #e6db74, /* LiteralString */ 's': #e6db74, /* LiteralStringAffix */ 'sa': #e6db74, @@ -298,22 +299,22 @@ $code-highlight-color-map-dark: ( /* LiteralStringDelimiter */ 'dl': #e6db74, /* LiteralStringDoc */ 'sd': #e6db74, /* LiteralStringDouble */ 's2': #e6db74, - /* LiteralStringEscape */ 'se': #ae81ff, + /* LiteralStringEscape */ 'se': #0550ae, /* LiteralStringHeredoc */ 'sh': #e6db74, /* LiteralStringInterpol */ 'si': #e6db74, /* LiteralStringOther */ 'sx': #e6db74, /* LiteralStringRegex */ 'sr': #e6db74, /* LiteralStringSingle */ 's1': #e6db74, /* LiteralStringSymbol */ 'ss': #e6db74, - /* LiteralNumber */ 'm': #ae81ff, - /* LiteralNumberBin */ 'mb': #ae81ff, - /* LiteralNumberFloat */ 'mf': #ae81ff, - /* LiteralNumberHex */ 'mh': #ae81ff, - /* LiteralNumberInteger */ 'mi': #ae81ff, - /* LiteralNumberIntegerLong */ 'il': #ae81ff, - /* LiteralNumberOct */ 'mo': #ae81ff, - /* Operator */ 'o': #f92672, - /* OperatorWord */ 'ow': #f92672, + /* LiteralNumber */ 'm': #0550ae, + /* LiteralNumberBin */ 'mb': #0550ae, + /* LiteralNumberFloat */ 'mf': #0550ae, + /* LiteralNumberHex */ 'mh': #0550ae, + /* LiteralNumberInteger */ 'mi': #0550ae, + /* LiteralNumberIntegerLong */ 'il': #0550ae, + /* LiteralNumberOct */ 'mo': #0550ae, + /* Operator */ 'o': #116329, + /* OperatorWord */ 'ow': #116329, /* Punctuation */ 'p': $code-color-dark, /* Comment */ 'c': #75715e, /* CommentHashbang */ 'ch': #75715e, @@ -323,7 +324,7 @@ $code-highlight-color-map-dark: ( /* CommentPreproc */ 'cp': #75715e, /* CommentPreprocFile */ 'cpf': #75715e, /* Generic */ 'g': $code-color-dark, - /* GenericDeleted */ 'gd': #f92672, + /* GenericDeleted */ 'gd': #116329, /* GenericEmph */ 'ge': $code-color-dark, /* GenericError */ 'gr': $code-color-dark, /* GenericHeading */ 'gh': $code-color-dark, diff --git a/exampleSite/content/tests/highlight.md b/exampleSite/content/tests/highlight.md index 981210be..62a4ef62 100644 --- a/exampleSite/content/tests/highlight.md +++ b/exampleSite/content/tests/highlight.md @@ -6,6 +6,53 @@ draft: true --- `inline code` +```markdown +1. first +2. second + +> bq + +**blod** *italic* + +--- ++++ +*** +``` + +```java +/** + * @author John Smith +*/ +package l2f.gameserver.model; + +public abstract strictfp class L2Char extends L2Object { + public static final Short ERROR = 0x0001; + + public void moveTo(int x, int y, int z) { + _ai = null; + log("Should not be called"); + if (1 > 5) { // wtf!? + return; + } + } +} + +``` + +```go +package main + +import "fmt" + +func main() { + ch := make(chan float64) + ch <- 1.0e10 // magic number + x, ok := <- ch + defer fmt.Println(`exitting now\`) + go println(len("hello world!")) + return +} +``` ```scss pre { @@ -32,54 +79,51 @@ pre { } ``` -```go -package main - -import "fmt" - -func main() { - fmt.Println("Hello, World!") -} -``` - ```diff - theme = "LoveIt" + theme = "FixIt" +! enhancements and fixes ``` ```javascript -grunt.initConfig({ - assemble: { - options: { - assets: 'docs/assets', - data: 'src/data/*.{json,yml}', - helpers: 'src/custom-helpers.js', - partials: ['src/partials/**/*.{hbs,md}'] - }, - pages: { - options: { - layout: 'default.hbs' - }, - files: { - './': ['src/templates/pages/index.hbs'] - } - } +function $initHighlight(block, cls) { + try { + if (cls.search(/\bno\-highlight\b/) != -1) + return process(block, true, 0x0F) + + ` class="${cls}"`; + } catch (e) { + /* handle exception */ } -}; + for (var i = 0 / 2; i < classes.length; i++) { + if (checkCondition(classes[i]) === undefined) + console.log('undefined'); + } + + return ( +
+ {block} +
+ ) +} + +export $initHighlight; ``` - ▸ .github/ # GitHub configuration - ▸ _scripts/ # shell commands for hugo project, entrance: hugo_main.sh - ▸ archetypes/ # page archetypes (like scaffolds of archetypes) - ▸ assets/ # css, js, third-party libraries etc. - ▸ content/ # blog source of hugo project - ▸ data/ # blog data (allow: yaml, json, toml), e.g. friends.yml - ▸ i18n/ # i18n translation documents - ▸ layouts/ # page layouts source - ▸ public/ # build directory - ▸ static/ # static files, e.g. favicon.ico - ▸ themes/ # theme submodules - config.toml # configuration of hugo project (like _config.yml of hexo) +```html + +Title + + + + + + +

Title

+ + +``` ```yaml # - nickname: 标题 @@ -90,14 +134,29 @@ grunt.initConfig({ avatar: https://gravatar.loli.net/avatar/3f985efb5907ca52944a3cd7edd51606?d=wavatar&v=1.3.10 url: https://lruihao.cn description: 不怕萬人阻擋，只怕自己投降 - ``` ```html

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

``` -

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

+

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

+ +{{< highlight javascript "linenos=table,hl_lines=6-9,linenostart=287" >}} +/** + * 把字符串的文件後綴轉成數組 + * @param {String} str 待轉化字符串 + * @returns {Array|null} 轉化后的數組 + */ +var _str2Array = (str) => { + if (typeof (str) !== String && !Array.isArray(str)) { + return null; + } + if (!Array.isArray(str)) { + return str.split(','); + } +}; +{{< / highlight >}} ---