blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 23:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Style: add github highlight style (#43)

Browse Source
This commit is contained in:
Cell
2022-02-28 21:52:26 +08:00
parent 8cae970b03
commit 7ae8fa7104
4 changed files with 299 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/_core/_base.scss
+1 -1
View File
@@ -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;
assets/css/_partial/_single/_code.scss
+105 -53
View File
@@ -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
assets/css/_variables.scss
+93 -92
View File
@@ -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,
exampleSite/content/tests/highlight.md
+100 -41
View File
@@ -6,6 +6,53 @@ draft: true
---
`inline code`
```markdown
1. first
2. second
> bq
**blod** *italic*
---
+++
***
```
```java
/**
* @author John Smith <john.smith@example.com>
*/
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 (
<div>
<web-component>{block}</web-component>
</div>
)
}
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
<!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>
```
```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
<p>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.</p>
```
<p>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.</p>
<p>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.</p>
{{< 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 >}}
---