diff --git a/layout/common/scripts.ftl b/layout/common/scripts.ftl index ae1b14f..3736fd1 100644 --- a/layout/common/scripts.ftl +++ b/layout/common/scripts.ftl @@ -18,7 +18,10 @@ }).createToc(); #if> - +<#if is_post?? || is_sheet?? || is_journal??> + + +#if> -#if> <#if is_index??> @@ -52,6 +46,8 @@ #if> <#include "./plugin/style.theme.ftl"> + + +<#if is_post?? || is_sheet?? || is_journal??> + +#if>
diff --git a/layout/plugin/style.theme.ftl b/layout/plugin/style.theme.ftl index fe76a65..00f3b57 100644 --- a/layout/plugin/style.theme.ftl +++ b/layout/plugin/style.theme.ftl @@ -133,7 +133,7 @@ } blockquote { background-color: var(--code-bg-color) !important; - color: #fff !important; + color: #000 !important; } .card .content, /** @@ -211,7 +211,7 @@ code[class*="language-"], pre[class*="language-"] { color: var(--color); - background-color: var(--code-bg-color) !important; + background-color: var(--code-bg-color); } pre[class*="language-"], :not(pre) > code[class*="language-"] { @@ -263,10 +263,10 @@ color: var(--code-deleted-color); } .line-numbers .line-numbers-rows { - background-color: var(--code-line-numbers-bg-color) !important; + /*background-color: var(--code-line-numbers-bg-color) !important;*/ } .line-numbers-rows > span:before { - color: var(--code-line-numbers-color) !important; + /*color: var(--code-line-numbers-color) !important;*/ } .line-highlight { background: rgba(21, 21, 21, 0.2) !important; diff --git a/settings.yaml b/settings.yaml index 1c27f2f..a4bf0b3 100644 --- a/settings.yaml +++ b/settings.yaml @@ -195,22 +195,8 @@ post: label: Dark - value: Okaidia label: Okaidia - - value: Solarized Light - label: Solarized Light - value: Tomorrow Night label: Tomorrow Night - - value: Twilight - label: Twilight -# code_pretty: -# name: code_pretty -# label: 文章代码高亮主题 -# type: select -# default: light -# options: -# - value: Dark -# label: dark -# - value: light -# label: light comment_enable: name: comment_enable label: 显示评论 diff --git a/source/css/style.css b/source/css/style.css index fa0cf05..e58442f 100644 --- a/source/css/style.css +++ b/source/css/style.css @@ -255,7 +255,7 @@ img.thumbnail { } .article blockquote { border-left: 0.4rem solid #4b8af3; - background-color: #e9f5fe; + background-color: #EBEDED !important; } .content blockquote { padding: 0.25em 0.5em; @@ -440,7 +440,7 @@ img.thumbnail { font-size: 0.95em; font-family: 'Fira Sans', monospace, "Microsoft YaHei"; } -.content code { +:not(pre) > code { color: #ff3860 !important; } .content blockquote footer strong + cite { diff --git a/source/css/style.styl b/source/css/style.styl index 988be2a..b51c421 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -385,8 +385,6 @@ img.thumbnail code, pre font-size: 0.95em font-family: family-mono - code - color: #ff3860 !important //code // color: hsl(348, 100%, 61%) // background: transparent diff --git a/source/lib/prism/css/prism-Coy.css b/source/lib/prism/css/prism-Coy.css index f5cfb32..6665eb8 100644 --- a/source/lib/prism/css/prism-Coy.css +++ b/source/lib/prism/css/prism-Coy.css @@ -1,5 +1,5 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+apacheconf+applescript+c+csharp+autohotkey+bash+basic+cpp+aspnet+arduino+ruby+css-extras+d+dart+django+docker+markup-templating+git+go+groovy+less+haskell+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+markdown+lua+makefile+nginx+objectivec+opencl+perl+php+php-extras+sql+powershell+properties+scss+pure+python+r+jsx+typescript+rust+sass+stylus+scala+scheme+plsql+pug+swift+yaml+haml+toml+tsx+vbnet+velocity+vim+visual-basic */ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ /** * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics); @@ -11,6 +11,7 @@ pre[class*="language-"] { color: black; background: none; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; @@ -46,7 +47,7 @@ pre[class*="language-"]>code { background-attachment: local; } -code[class*="language"] { +code[class*="language-"] { max-height: inherit; height: inherit; padding: 0 1em; @@ -94,7 +95,6 @@ pre[class*="language-"]:after { transform: rotate(-2deg); } -:not(pre) > code[class*="language-"]:after, pre[class*="language-"]:after { right: 0.75em; left: auto; @@ -179,7 +179,7 @@ pre[class*="language-"]:after { cursor: help; } -.namespace { +.token.namespace { opacity: .7; } @@ -192,13 +192,6 @@ pre[class*="language-"]:after { } -/* Plugin styles */ -.token.tab:not(:empty):before, -.token.cr:before, -.token.lf:before { - color: #e0d7d1; -} - /* Plugin styles: Line Numbers */ pre[class*="language-"].line-numbers.line-numbers { padding-left: 0; @@ -226,3 +219,203 @@ pre .line-highlight { margin-top: 0; } +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); + /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 .333ch; + box-sizing: border-box; + border: 1px solid white; + outline: 1px solid rgba(0,0,0,.5); + overflow: hidden; +} + +span.inline-color { + display: block; + /* To prevent visual glitches again */ + height: 120%; + width: 120%; +} + diff --git a/source/lib/prism/css/prism-Dark.css b/source/lib/prism/css/prism-Dark.css index 8956a2a..77217b3 100644 --- a/source/lib/prism/css/prism-Dark.css +++ b/source/lib/prism/css/prism-Dark.css @@ -1,5 +1,5 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript+apacheconf+applescript+c+csharp+autohotkey+bash+basic+cpp+aspnet+arduino+ruby+css-extras+d+dart+django+docker+markup-templating+git+go+groovy+less+haskell+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+markdown+lua+makefile+nginx+objectivec+opencl+perl+php+php-extras+sql+powershell+properties+scss+pure+python+r+jsx+typescript+rust+sass+stylus+scala+scheme+plsql+pug+swift+yaml+haml+toml+tsx+vbnet+velocity+vim+visual-basic */ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ /** * prism.js Dark theme for JavaScript, CSS and HTML * Based on the slides of the talk “/Reg(exp){2}lained/” @@ -12,6 +12,7 @@ pre[class*="language-"] { background: none; text-shadow: 0 -.1em .2em black; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; @@ -71,7 +72,7 @@ pre[class*="language-"] { opacity: .7; } -.namespace { +.token.namespace { opacity: .7; } @@ -129,3 +130,203 @@ pre[class*="language-"] { color: red; } +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); + /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 .333ch; + box-sizing: border-box; + border: 1px solid white; + outline: 1px solid rgba(0,0,0,.5); + overflow: hidden; +} + +span.inline-color { + display: block; + /* To prevent visual glitches again */ + height: 120%; + width: 120%; +} + diff --git a/source/lib/prism/css/prism-Default.css b/source/lib/prism/css/prism-Default.css index 171051a..42af2e0 100644 --- a/source/lib/prism/css/prism-Default.css +++ b/source/lib/prism/css/prism-Default.css @@ -1,5 +1,5 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+apacheconf+applescript+c+csharp+autohotkey+bash+basic+cpp+aspnet+arduino+ruby+css-extras+d+dart+django+docker+markup-templating+git+go+groovy+less+haskell+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+markdown+lua+makefile+nginx+objectivec+opencl+perl+php+php-extras+sql+powershell+properties+scss+pure+python+r+jsx+typescript+rust+sass+stylus+scala+scheme+plsql+pug+swift+yaml+haml+toml+tsx+vbnet+velocity+vim+visual-basic */ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) @@ -12,6 +12,7 @@ pre[class*="language-"] { background: none; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; @@ -78,7 +79,7 @@ pre[class*="language-"] { color: #999; } -.namespace { +.token.namespace { opacity: .7; } @@ -107,6 +108,7 @@ pre[class*="language-"] { .language-css .token.string, .style .token.string { color: #9a6e3a; + /* This background color was intended by the author of this theme. */ background: hsla(0, 0%, 100%, .5); } @@ -139,3 +141,203 @@ pre[class*="language-"] { cursor: help; } +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); + /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 .333ch; + box-sizing: border-box; + border: 1px solid white; + outline: 1px solid rgba(0,0,0,.5); + overflow: hidden; +} + +span.inline-color { + display: block; + /* To prevent visual glitches again */ + height: 120%; + width: 120%; +} + diff --git a/source/lib/prism/css/prism-Okaidia.css b/source/lib/prism/css/prism-Okaidia.css index b7ae25d..2bf7430 100644 --- a/source/lib/prism/css/prism-Okaidia.css +++ b/source/lib/prism/css/prism-Okaidia.css @@ -1,5 +1,5 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+apacheconf+applescript+c+csharp+autohotkey+bash+basic+cpp+aspnet+arduino+ruby+css-extras+d+dart+django+docker+markup-templating+git+go+groovy+less+haskell+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+markdown+lua+makefile+nginx+objectivec+opencl+perl+php+php-extras+sql+powershell+properties+scss+pure+python+r+jsx+typescript+rust+sass+stylus+scala+scheme+plsql+pug+swift+yaml+haml+toml+tsx+vbnet+velocity+vim+visual-basic */ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ /** * okaidia theme for JavaScript, CSS and HTML * Loosely based on Monokai textmate theme by http://www.monokai.nl/ @@ -12,6 +12,7 @@ pre[class*="language-"] { background: none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; @@ -53,14 +54,14 @@ pre[class*="language-"] { .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: #8292a2; } .token.punctuation { color: #f8f8f2; } -.namespace { +.token.namespace { opacity: .7; } @@ -123,3 +124,203 @@ pre[class*="language-"] { cursor: help; } +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); + /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 .333ch; + box-sizing: border-box; + border: 1px solid white; + outline: 1px solid rgba(0,0,0,.5); + overflow: hidden; +} + +span.inline-color { + display: block; + /* To prevent visual glitches again */ + height: 120%; + width: 120%; +} + diff --git a/source/lib/prism/css/prism-Solarized Light.css b/source/lib/prism/css/prism-Solarized Light.css index 35d13cc..09c90b1 100644 --- a/source/lib/prism/css/prism-Solarized Light.css +++ b/source/lib/prism/css/prism-Solarized Light.css @@ -1,5 +1,5 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+apacheconf+applescript+c+csharp+autohotkey+bash+basic+cpp+aspnet+arduino+ruby+css-extras+d+dart+django+docker+markup-templating+git+go+groovy+less+haskell+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+markdown+lua+makefile+nginx+objectivec+opencl+perl+php+php-extras+sql+powershell+properties+scss+pure+python+r+jsx+typescript+rust+sass+stylus+scala+scheme+plsql+pug+swift+yaml+haml+toml+tsx+vbnet+velocity+vim+visual-basic */ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ /* Solarized Color Schemes originally by Ethan Schoonover http://ethanschoonover.com/solarized @@ -34,6 +34,7 @@ code[class*="language-"], pre[class*="language-"] { color: #657b83; /* base00 */ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; @@ -92,7 +93,7 @@ pre[class*="language-"] { color: #586e75; /* base01 */ } -.namespace { +.token.namespace { opacity: .7; } @@ -150,3 +151,203 @@ pre[class*="language-"] { cursor: help; } +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); + /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 .333ch; + box-sizing: border-box; + border: 1px solid white; + outline: 1px solid rgba(0,0,0,.5); + overflow: hidden; +} + +span.inline-color { + display: block; + /* To prevent visual glitches again */ + height: 120%; + width: 120%; +} + diff --git a/source/lib/prism/css/prism-Tomorrow Night.css b/source/lib/prism/css/prism-Tomorrow Night.css index 04cf4e9..1ef0a30 100644 --- a/source/lib/prism/css/prism-Tomorrow Night.css +++ b/source/lib/prism/css/prism-Tomorrow Night.css @@ -1,5 +1,5 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+apacheconf+applescript+c+csharp+autohotkey+bash+basic+cpp+aspnet+arduino+ruby+css-extras+d+dart+django+docker+markup-templating+git+go+groovy+less+haskell+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+markdown+lua+makefile+nginx+objectivec+opencl+perl+php+php-extras+sql+powershell+properties+scss+pure+python+r+jsx+typescript+rust+sass+stylus+scala+scheme+plsql+pug+swift+yaml+haml+toml+tsx+vbnet+velocity+vim+visual-basic */ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ /** * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML * Based on https://github.com/chriskempson/tomorrow-theme @@ -11,6 +11,7 @@ pre[class*="language-"] { color: #ccc; background: none; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; @@ -122,3 +123,203 @@ pre[class*="language-"] { color: green; } +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); + /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 .333ch; + box-sizing: border-box; + border: 1px solid white; + outline: 1px solid rgba(0,0,0,.5); + overflow: hidden; +} + +span.inline-color { + display: block; + /* To prevent visual glitches again */ + height: 120%; + width: 120%; +} + diff --git a/source/lib/prism/css/prism-Twilight.css b/source/lib/prism/css/prism-Twilight.css index 654f76c..8176b2f 100644 --- a/source/lib/prism/css/prism-Twilight.css +++ b/source/lib/prism/css/prism-Twilight.css @@ -1,5 +1,5 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+apacheconf+applescript+c+csharp+autohotkey+bash+basic+cpp+aspnet+arduino+ruby+css-extras+d+dart+django+docker+markup-templating+git+go+groovy+less+haskell+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+markdown+lua+makefile+nginx+objectivec+opencl+perl+php+php-extras+sql+powershell+properties+scss+pure+python+r+jsx+typescript+rust+sass+stylus+scala+scheme+plsql+pug+swift+yaml+haml+toml+tsx+vbnet+velocity+vim+visual-basic */ +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ /** * prism.js Twilight theme * Based (more or less) on the Twilight theme originally of Textmate fame. @@ -10,6 +10,7 @@ pre[class*="language-"] { color: white; background: none; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; text-align: left; text-shadow: 0 -.1em .2em black; white-space: pre; @@ -86,7 +87,7 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection { opacity: .7; } -.namespace { +.token.namespace { opacity: .7; } @@ -199,3 +200,203 @@ pre[data-line] { top: auto; } +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} + + .line-highlight:before, + .line-highlight[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%,.4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + .line-highlight[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + +.line-numbers .line-highlight:before, +.line-numbers .line-highlight:after { + content: none; +} + +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:before { + cursor: pointer; +} +pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: rgba(128, 128, 128, .2); +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} + + .line-numbers-rows > span { + display: block; + counter-increment: linenumber; + } + + .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } + +div.code-toolbar { + position: relative; +} + +div.code-toolbar > .toolbar { + position: absolute; + top: .3em; + right: .2em; + transition: opacity 0.3s ease-in-out; + opacity: 0; +} + +div.code-toolbar:hover > .toolbar { + opacity: 1; +} + +/* Separate line b/c rules are thrown out if selector is invalid. + IE11 and old Edge versions don't support :focus-within. */ +div.code-toolbar:focus-within > .toolbar { + opacity: 1; +} + +div.code-toolbar > .toolbar .toolbar-item { + display: inline-block; +} + +div.code-toolbar > .toolbar a { + cursor: pointer; +} + +div.code-toolbar > .toolbar button { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + -webkit-user-select: none; /* for button */ + -moz-user-select: none; + -ms-user-select: none; +} + +div.code-toolbar > .toolbar a, +div.code-toolbar > .toolbar button, +div.code-toolbar > .toolbar span { + color: #bbb; + font-size: .8em; + padding: 0 .5em; + background: #f5f2f0; + background: rgba(224, 224, 224, 0.2); + box-shadow: 0 2px 0 0 rgba(0,0,0,0.2); + border-radius: .5em; +} + +div.code-toolbar > .toolbar a:hover, +div.code-toolbar > .toolbar a:focus, +div.code-toolbar > .toolbar button:hover, +div.code-toolbar > .toolbar button:focus, +div.code-toolbar > .toolbar span:hover, +div.code-toolbar > .toolbar span:focus { + color: inherit; + text-decoration: none; +} + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4="); + /* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */ + background-position: center; + background-size: 110%; + + display: inline-block; + height: 1.333ch; + width: 1.333ch; + margin: 0 .333ch; + box-sizing: border-box; + border: 1px solid white; + outline: 1px solid rgba(0,0,0,.5); + overflow: hidden; +} + +span.inline-color { + display: block; + /* To prevent visual glitches again */ + height: 120%; + width: 120%; +} + diff --git a/source/lib/prism/css/prism-light.css b/source/lib/prism/css/prism-light.css index d92beab..25894b4 100644 --- a/source/lib/prism/css/prism-light.css +++ b/source/lib/prism/css/prism-light.css @@ -1,231 +1,290 @@ -code { - background-color: #F8F8F8; - color: #333333; - font-size: .875em; - font-weight: 400; - padding: .25em .5em .25em; - border-radius: 2px; -} +/* PrismJS 1.20.0 +https://prismjs.com/download.html#themes=prism-funky&languages=markup+css+clike+javascript+apacheconf+aspnet+bash+basic+c+csharp+cpp+css-extras+d+dart+django+docker+git+go+groovy+http+hpkp+hsts+ini+java+javastacktrace+json+julia+kotlin+latex+less+lua+makefile+markdown+markup-templating+nginx+objectivec+perl+php+php-extras+plsql+powershell+properties+pure+python+r+jsx+tsx+ruby+rust+sass+scss+scala+scheme+sql+stylus+swift+typescript+vbnet+velocity+vim+visual-basic+yaml&plugins=line-highlight+line-numbers+show-language+inline-color+toolbar+copy-to-clipboard */ +/** + * prism.js Funky theme + * Based on “Polyfilling the gaps” talk slides http://lea.verou.me/polyfilling-the-gaps/ + * @author Lea Verou + */ + code[class*="language-"], pre[class*="language-"] { - font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; - font-size: 0.813rem; - font-weight: 400; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; - background: #F1F3F3; - color: #303030; - line-height: 2; -} + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #E0E0E0; -} + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #E0E0E0; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } /* Code blocks */ pre[class*="language-"] { - padding: -2em; - margin: .5em 0; - overflow: auto; - border-radius: 2px; + padding: .4em .8em; + margin: .5em 0; + overflow: auto; + background: url('data:image/svg+xml;charset=utf-8,