m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-05 03:15:07 +01:00
Code

syntax tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-07-22 01:40:26 +02:00
parent 5edd7f66db
commit aee5f7755a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 51 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -44,6 +44,7 @@
"graphql": "^0.13.2", "graphql": "^0.13.2",
"intersection-observer": "^0.5.0", "intersection-observer": "^0.5.0",
"node-sass": "^4.9.2", "node-sass": "^4.9.2",
"nord": "^0.2.1",
"prismjs": "^1.15.0", "prismjs": "^1.15.0",
"qrious": "^4.0.2", "qrious": "^4.0.2",
"react": "^16.4.1", "react": "^16.4.1",

9
src/styles/_code.scss
View File

@ -52,12 +52,10 @@ pre {
} }
code { code {
padding: 0;
white-space: pre; white-space: pre;
overflow: auto;
display: block; display: block;
color: inherit; color: inherit;
background-color: transparent;
border-radius: 0;
overflow-wrap: normal; overflow-wrap: normal;
word-wrap: normal; word-wrap: normal;
word-break: normal; word-break: normal;
@ -77,9 +75,4 @@ pre > code.language-shell {
} }
} }
:not(pre) > code[class*='language-'] {
background: rgba($code-bg, .05);
color: $text-color;
}
@import 'syntax'; @import 'syntax';

95
src/styles/_syntax.scss
View File

@ -1,13 +1,17 @@
/** @import 'nord/src/sass/nord';
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*='language-'], /* Code blocks */
pre[class*='language-'] { pre[class*='language-'] {
tab-size: 4; background: $nord0;
hyphens: none; color: $nord4;
}
pre[class*='language-'],
code[class*='language-'] {
::-moz-selection,
::selection {
background: $nord4;
}
} }
/* Inline code */ /* Inline code */
@ -15,64 +19,67 @@ pre[class*='language-'] {
padding: .1em; padding: .1em;
border-radius: .3em; border-radius: .3em;
white-space: normal; white-space: normal;
background: $nord4;
color: inherit;
} }
.token.comment, .token.comment,
.token.block-comment,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: #999; color: $nord3;
} }
.token.punctuation { .token.punctuation {
color: #ccc; color: $nord9;
} }
.token.tag, .namespace {
.token.attr-name, opacity: .7;
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
} }
.token.property, .token.property,
.token.class-name, .token.tag,
.token.boolean,
.token.number,
.token.constant, .token.constant,
.token.symbol { .token.symbol,
color: #f8c555; .token.deleted {
color: $nord9;
} }
.token.selector, .token.selector,
.token.important, .token.attr-name,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string, .token.string,
.token.char, .token.char,
.token.attr-value, .token.builtin,
.token.regex, .token.inserted {
.token.variable { color: $nord7;
color: #7ec699;
} }
.token.operator, .token.operator,
.token.entity, .token.entity,
.token.url { .token.url,
color: #67cdcc; .language-css .token.string,
.style .token.string {
color: $nord7;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: $nord14;
}
.token.function,
.token.class-name {
color: $nord12;
}
.token.regex,
.token.important,
.token.variable {
color: $nord13;
} }
.token.important, .token.important,
@ -87,7 +94,3 @@ pre[class*='language-'] {
.token.entity { .token.entity {
cursor: help; cursor: help;
} }
.token.inserted {
color: green;
}