Skip to content

Commit

Permalink
🎨 Style: perfect highlight style details (#43)
Browse files Browse the repository at this point in the history 
TODO:
1. gist highlight style
2. inline code style of github dark dimmed
  • Loading branch information
@Lruihao
Lruihao committed Mar 1, 2022
1 parent fd65f4f commit ae23c42
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 65 deletions.
50 changes: 28 additions & 22 deletions assets/css/_partial/_single/_code.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,11 @@ pre {
border-radius: $global-border-radius;
color: $code-info-color;
background: darken($code-background-color, 3%);
@include transition(all 0.2s ease);
@include transition(border-radius 0.2s ease);

[theme='dark'] & {
color: $code-info-color-dark;
background: darken($code-background-color-dark, 3%);
background: darken($code-background-color-dark, 6%);
}

&:hover {
Expand Down Expand Up @@ -134,33 +134,39 @@ pre {
}
}
}


// delayed loading table-wrapper
.table-wrapper {
max-height: 0;
overflow: hidden;
border-radius: 0 0 $global-border-radius $global-border-radius;
@include details-transition-open;
}

> table {
border-spacing: 0;
width: auto;
overflow: auto;
display: block;
background: $code-background-color;
table {
border-spacing: 0;
width: auto;
overflow: auto;
display: block;
background: $code-background-color;

[theme='dark'] & {
background: $code-background-color-dark;
}
[theme='dark'] & {
background: $code-background-color-dark;
}

td {
vertical-align: top;
padding: 0;
}
td {
vertical-align: top;
padding: 0;
}

pre {
padding: 0.25rem 0.5rem 0.25rem 0;
border-radius: 0;
}
pre {
padding: 0.25rem;
border-radius: 0;
}

/* lineNumbersInTable=false */
.ln {
min-width: 1.35rem;
}

// ========== lineNumbersInTable ========== //
Expand Down Expand Up @@ -194,7 +200,7 @@ pre {
border-radius: $global-border-radius $global-border-radius 0 0;

[theme='dark'] & {
background: darken($code-background-color-dark, 6%);
background: darken($code-background-color-dark, 3%);
}
}

Expand Down Expand Up @@ -244,7 +250,7 @@ pre {
.ln {
padding-right: 0.5rem;
display: inline-block;
min-width: 1.6rem;
min-width: 1.1rem;
text-align: right;
}
/* LineNumbers */
Expand Down
86 changes: 43 additions & 43 deletions assets/css/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ $code-highlight-color-map: (
/* NameFunctionMagic */ 'fm': #0550ae,
/* NameLabel */ 'nl': #0550ae,
/* NameNamespace */ 'nn': #8250df,
/* NameOther */ 'nx': $code-color,
/* NameOther */ 'nx': #0550ae,
/* NameProperty */ 'py': #0550ae,
/* NameTag */ 'nt': #116329,
/* NameVariable */ 'nv': #953800,
Expand Down Expand Up @@ -253,15 +253,15 @@ $code-highlight-color-map: (
/* GenericDeleted */ 'gd': #82071e,
/* GenericEmph */ 'ge': $code-color,
/* GenericError */ 'gr': $code-error-color,
/* GenericHeading */ 'gh': #999999,
/* GenericHeading */ 'gh': $code-color,
/* GenericInserted */ 'gi': #116329,
/* GenericOutput */ 'go': #888888,
/* GenericPrompt */ 'gp': #555555,
/* GenericOutput */ 'go': $code-color,
/* GenericPrompt */ 'gp': $code-color,
/* GenericStrong */ 'gs': $code-color,
/* GenericSubheading */ 'gu': #aaaaaa,
/* GenericSubheading */ 'gu': $code-color,
/* GenericTraceback */ 'gt': $code-error-color,
/* GenericUnderline */ 'gl': $code-color,
/* TextWhitespace */ 'w': #bbbbbb,
/* TextWhitespace */ 'w': $code-color,
/* Other */ 'x': $code-color
) !default;
$code-highlight-color-map-dark: (
Expand All @@ -272,30 +272,30 @@ $code-highlight-color-map-dark: (
/* KeywordNamespace */ 'kn': #f47067,
/* KeywordPseudo */ 'kp': #f47067,
/* KeywordReserved */ 'kr': #f47067,
/* KeywordType */ 'kt': #dcbdfb,
/* KeywordType */ 'kt': #f47067,
/* Name */ 'n': $code-color-dark,
/* NameAttribute */ 'na': #008080,
/* NameBuiltin */ 'nb': #0086b3,
/* NameBuiltinPseudo */ 'bp': #999999,
/* NameAttribute */ 'na': #6cb6ff,
/* NameBuiltin */ 'nb': #dcbdfb,
/* NameBuiltinPseudo */ 'bp': $code-color-dark,
/* NameClass */ 'nc': #dcbdfb,
/* NameConstant */ 'no': #008080,
/* NameDecorator */ 'nd': #3c5d5d,
/* NameEntity */ 'ni': #800080,
/* NameException */ 'ne': #dcbdfb,
/* NameConstant */ 'no': #6cb6ff,
/* NameDecorator */ 'nd': #dcbdfb,
/* NameEntity */ 'ni': #6cb6ff,
/* NameException */ 'ne': #6cb6ff,
/* NameFunction */ 'nf': #dcbdfb,
/* NameFunctionMagic */ 'fm': $code-color-dark,
/* NameLabel */ 'nl': #dcbdfb,
/* NameNamespace */ 'nn': #dcbdfb,
/* NameOther */ 'nx': $code-color-dark,
/* NameProperty */ 'py': $code-color-dark,
/* NameFunctionMagic */ 'fm': #6cb6ff,
/* NameLabel */ 'nl': #6cb6ff,
/* NameNamespace */ 'nn': #f47067,
/* NameOther */ 'nx': #dcbdfb,
/* NameProperty */ 'py': #6cb6ff,
/* NameTag */ 'nt': #8ddb8c,
/* NameVariable */ 'nv': #008080,
/* NameVariableClass */ 'vc': #008080,
/* NameVariableGlobal */ 'vg': #008080,
/* NameVariableInstance */ 'vi': #008080,
/* NameVariableMagic */ 'vm': $code-color-dark,
/* Literal */ 'l': $code-color-dark,
/* LiteralDate */ 'ld': $code-color-dark,
/* NameVariable */ 'nv': #f69d50,
/* NameVariableClass */ 'vc': #6cb6ff,
/* NameVariableGlobal */ 'vg': #6cb6ff,
/* NameVariableInstance */ 'vi': #6cb6ff,
/* NameVariableMagic */ 'vm': #6cb6ff,
/* Literal */ 'l': #6cb6ff,
/* LiteralDate */ 'ld': #96d0ff,
/* LiteralString */ 's': #96d0ff,
/* LiteralStringAffix */ 'sa': #96d0ff,
/* LiteralStringBacktick */ 'sb': #96d0ff,
Expand All @@ -310,36 +310,36 @@ $code-highlight-color-map-dark: (
/* LiteralStringRegex */ 'sr': #96d0ff,
/* LiteralStringSingle */ 's1': #96d0ff,
/* LiteralStringSymbol */ 'ss': #96d0ff,
/* LiteralNumber */ 'm': #009999,
/* LiteralNumberBin */ 'mb': #009999,
/* LiteralNumberFloat */ 'mf': #009999,
/* LiteralNumberHex */ 'mh': #009999,
/* LiteralNumberInteger */ 'mi': #009999,
/* LiteralNumberIntegerLong */ 'il': #009999,
/* LiteralNumberOct */ 'mo': #009999,
/* LiteralNumber */ 'm': #6cb6ff,
/* LiteralNumberBin */ 'mb': #6cb6ff,
/* LiteralNumberFloat */ 'mf': #6cb6ff,
/* LiteralNumberHex */ 'mh': #6cb6ff,
/* LiteralNumberInteger */ 'mi': #6cb6ff,
/* LiteralNumberIntegerLong */ 'il': #6cb6ff,
/* LiteralNumberOct */ 'mo': #6cb6ff,
/* Operator */ 'o': #f47067,
/* OperatorWord */ 'ow': #f47067,
/* Punctuation */ 'p': $code-color-dark,
/* Comment */ 'c': #768390,
/* CommentHashbang */ 'ch': #768390,
/* CommentMultiline */ 'cm': #768390,
/* CommentSingle */ 'c1': #768390,
/* CommentSpecial */ 'cs': #999999,
/* CommentPreproc */ 'cp': #999999,
/* CommentPreprocFile */ 'cpf': #999999,
/* CommentSpecial */ 'cs': #768390,
/* CommentPreproc */ 'cp': #6cb6ff,
/* CommentPreprocFile */ 'cpf': #768390,
/* Generic */ 'g': $code-color-dark,
/* GenericDeleted */ 'gd': #ffd8d3,
/* GenericEmph */ 'ge': $code-color-dark,
/* GenericError */ 'gr': #aa0000,
/* GenericHeading */ 'gh': #999999,
/* GenericError */ 'gr': $code-error-color,
/* GenericHeading */ 'gh': $code-color-dark,
/* GenericInserted */ 'gi': #b4f1b4,
/* GenericOutput */ 'go': #888888,
/* GenericPrompt */ 'gp': #adbac7,
/* GenericOutput */ 'go': $code-color-dark,
/* GenericPrompt */ 'gp': $code-color-dark,
/* GenericStrong */ 'gs': $code-color-dark,
/* GenericSubheading */ 'gu': #aaaaaa,
/* GenericTraceback */ 'gt': #aa0000,
/* GenericSubheading */ 'gu': $code-color-dark,
/* GenericTraceback */ 'gt': $code-error-color,
/* GenericUnderline */ 'gl': $code-color-dark,
/* TextWhitespace */ 'w': #bbbbbb,
/* TextWhitespace */ 'w': $code-color-dark,
/* Other */ 'x': $code-color-dark,
) !default;
// ========== Code ========== //
Expand Down

0 comments on commit ae23c42

Please sign in to comment.