代码高亮优化
新逸Cary
parent
80cb68938a
commit
243a208b35
|
|
@ -18,7 +18,10 @@
|
|||
}).createToc();
|
||||
</script>
|
||||
</#if>
|
||||
|
||||
<#if is_post?? || is_sheet?? || is_journal??>
|
||||
<script type="text/javascript" src="${theme_base!}/source/lib/prism/js/prism.js"></script>
|
||||
<script>$('pre').addClass("line-numbers");</script>
|
||||
</#if>
|
||||
<script>
|
||||
var url = location.href;
|
||||
var urlstatus = false;
|
||||
|
|
|
|||
|
|
@ -35,14 +35,8 @@
|
|||
<link rel="stylesheet" href="${settings.cdn_lightgallery_css!}" />
|
||||
<link rel="stylesheet" href="${settings.cdn_justifiedGallery_css!}" />
|
||||
</#if>
|
||||
<link rel="stylesheet" href="${theme_base!}/source/lib/outdatedbrowser/outdatedbrowser.min.css" />
|
||||
<link rel="stylesheet" href="${theme_base!}/source/css/style.css" />
|
||||
<link rel="stylesheet" href="${theme_base!}/source/css/bundle.css" />
|
||||
<link rel="stylesheet" href="${theme_base!}/source/css/back-to-top.css" />
|
||||
<#if post?? || journals??>
|
||||
<link rel="stylesheet" href="${theme_base!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css" />
|
||||
<script type="text/javascript" src="${theme_base!}/source/lib/prism/js/prism.js"></script>
|
||||
</#if>
|
||||
<#if is_index??>
|
||||
<link rel="stylesheet" href="${theme_base!}/source/css/widget_pin.css" />
|
||||
<link rel="stylesheet" href="${settings.cdn_swiper_css!}" />
|
||||
|
|
@ -52,6 +46,8 @@
|
|||
</#if>
|
||||
<script type="text/javascript" src="${settings.cdn_pace_js!}"></script>
|
||||
<#include "./plugin/style.theme.ftl">
|
||||
<link rel="stylesheet" href="${theme_base!}/source/lib/outdatedbrowser/outdatedbrowser.min.css" />
|
||||
<link rel="stylesheet" href="${theme_base!}/source/css/style.css" />
|
||||
<style>
|
||||
body > .footer,
|
||||
body > .navbar,
|
||||
|
|
@ -78,6 +74,9 @@
|
|||
}
|
||||
</#if>
|
||||
</style>
|
||||
<#if is_post?? || is_sheet?? || is_journal??>
|
||||
<link rel="stylesheet" href="${theme_base!}/source/lib/prism/css/prism-${settings.code_pretty!'Default'}.css" />
|
||||
</#if>
|
||||
</head>
|
||||
|
||||
<body class="is-3-column">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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: 显示评论
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,<svg%20version%3D"1.1"%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"100"%20height%3D"100"%20fill%3D"rgba(0%2C0%2C0%2C.2)">%0D%0A<polygon%20points%3D"0%2C50%2050%2C0%200%2C0"%20%2F>%0D%0A<polygon%20points%3D"0%2C100%2050%2C100%20100%2C50%20100%2C0"%20%2F>%0D%0A<%2Fsvg>');
|
||||
background-size: 1em 1em;
|
||||
}
|
||||
|
||||
code[class*="language-"] {
|
||||
background: black;
|
||||
color: white;
|
||||
box-shadow: -.3em 0 0 .3em black, .3em 0 0 .3em black;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
padding: .2em;
|
||||
border-radius: .3em;
|
||||
box-shadow: none;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #B0B0B0;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #303030;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #0cf;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #FD8900;
|
||||
}
|
||||
|
||||
.token.property {
|
||||
color: #ABA800;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #3777E6;
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #1faaaa;
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #AD00A1;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #FD8900;
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #1faaaa;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: #00C918;
|
||||
}
|
||||
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.atrule {
|
||||
color: #1faaaa;
|
||||
}
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #3777E6;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.token.variable,
|
||||
.token.inserted {
|
||||
border-bottom: 1px dotted #151515;
|
||||
text-decoration: none;
|
||||
color: yellowgreen;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: deeppink;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #FF0086;
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre > code.highlight {
|
||||
outline: 0.4em solid #FF0086;
|
||||
outline-offset: .4em;
|
||||
.token.deleted {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
background-color: #E0E0E0 !important;
|
||||
/* Plugin styles: Diff Highlight */
|
||||
pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),
|
||||
pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {
|
||||
background-color: rgba(255, 0, 0, .3);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
color: #888 !important;
|
||||
pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),
|
||||
pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {
|
||||
background-color: rgba(0, 255, 128, .3);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
position: relative;
|
||||
padding: 1em 0 1em 3em;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
background: rgba(21, 21, 21, 0.2) !important;
|
||||
background: -webkit-linear-gradient(left, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
|
||||
background: linear-gradient(to right, rgba(21, 21, 21, 0.2) 70%, rgba(21, 21, 21, 0)) !important;
|
||||
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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar {
|
||||
position: absolute;
|
||||
top: .3em;
|
||||
right: .2em;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: .3em;
|
||||
right: .2em;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
div.code-toolbar:hover > .toolbar {
|
||||
opacity: 1;
|
||||
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;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar .toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
div.code-toolbar > .toolbar .toolbar-item:not(:first-child){
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a {
|
||||
cursor: pointer;
|
||||
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;
|
||||
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 {
|
||||
font-size: .8em;
|
||||
padding: .5em 1em;
|
||||
background: #f5f2f0;
|
||||
background: rgba(224, 224, 224, 0.2);
|
||||
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
div.code-toolbar > .toolbar a:not(:first-child),
|
||||
div.code-toolbar > .toolbar button:not(:first-child),
|
||||
div.code-toolbar > .toolbar span:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
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,
|
||||
|
|
@ -234,18 +293,41 @@ 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;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #888 !important;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: center;
|
||||
span.inline-color-wrapper {
|
||||
/*
|
||||
* The background image is the following SVG inline in base 64:
|
||||
*
|
||||
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +1,40 @@
|
|||
pre.line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
pre[class*="language-"].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre.line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: -3rem;
|
||||
padding-top: 2.6rem;
|
||||
font-size: 100%;
|
||||
/*background-color: #EBEDED;*/
|
||||
left: -3.8em;
|
||||
width: 2.6em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
bottom: -3rem;
|
||||
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 {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,24 @@
|
|||
/* PrismJS 1.17.1
|
||||
https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript */
|
||||
/* 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 Dark theme for JavaScript, CSS and HTML
|
||||
* Based on the slides of the talk “/Reg(exp){2}lained/”
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code {
|
||||
font-size: .875em;
|
||||
font-weight: 400;
|
||||
padding: .25em .5em .25em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
pre[class*="language-"] {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
font-weight: 400;
|
||||
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;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
|
|
@ -39,6 +30,18 @@ pre[class*="language-"] {
|
|||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
|
|
@ -46,39 +49,85 @@ pre[class*="language-"] {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 2em;
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
border-radius: 2px;
|
||||
line-height: 2;
|
||||
overflow-y: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .15em .2em .05em;
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.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);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
|
|
@ -92,8 +141,106 @@ 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;
|
||||
|
|
@ -120,9 +267,6 @@ div.code-toolbar:focus-within > .toolbar {
|
|||
div.code-toolbar > .toolbar .toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
div.code-toolbar > .toolbar .toolbar-item:not(:first-child){
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a {
|
||||
cursor: pointer;
|
||||
|
|
@ -144,14 +288,13 @@ div.code-toolbar > .toolbar button {
|
|||
div.code-toolbar > .toolbar a,
|
||||
div.code-toolbar > .toolbar button,
|
||||
div.code-toolbar > .toolbar span {
|
||||
color: #bbb;
|
||||
font-size: .8em;
|
||||
padding: .5em 1em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
div.code-toolbar > .toolbar a:not(:first-child),
|
||||
div.code-toolbar > .toolbar button:not(:first-child),
|
||||
div.code-toolbar > .toolbar span:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
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,
|
||||
|
|
@ -162,13 +305,39 @@ div.code-toolbar > .toolbar span:hover,
|
|||
div.code-toolbar > .toolbar span:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
|
||||
span.inline-color-wrapper {
|
||||
/*
|
||||
* The background image is the following SVG inline in base 64:
|
||||
*
|
||||
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* 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;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
/*background-color: #403E3E;*/
|
||||
/* To prevent visual glitches again */
|
||||
height: 120%;
|
||||
width: 120%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,117 +0,0 @@
|
|||
(function () {
|
||||
|
||||
if (typeof self === 'undefined' || !self.Prism || !self.document) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Class name for <pre> which is activating the plugin
|
||||
* @type {String}
|
||||
*/
|
||||
var PLUGIN_CLASS = 'line-numbers';
|
||||
|
||||
/**
|
||||
* Resizes line numbers spans according to height of line of code
|
||||
* @param {Element} element <pre> element
|
||||
*/
|
||||
var _resizeElement = function (element) {
|
||||
var codeStyles = getStyles(element);
|
||||
var whiteSpace = codeStyles['white-space'];
|
||||
|
||||
if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
|
||||
var codeElement = element.querySelector('code');
|
||||
var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
|
||||
var lineNumberSizer = element.querySelector('.line-numbers-sizer');
|
||||
var codeLines = element.textContent.split('\n');
|
||||
|
||||
if (!lineNumberSizer) {
|
||||
lineNumberSizer = document.createElement('span');
|
||||
lineNumberSizer.className = 'line-numbers-sizer';
|
||||
|
||||
codeElement.appendChild(lineNumberSizer);
|
||||
}
|
||||
|
||||
lineNumberSizer.style.display = 'block';
|
||||
|
||||
codeLines.forEach(function (line, lineNumber) {
|
||||
lineNumberSizer.textContent = line || '\n';
|
||||
var lineSize = lineNumberSizer.getBoundingClientRect().height;
|
||||
lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
|
||||
});
|
||||
|
||||
lineNumberSizer.textContent = '';
|
||||
lineNumberSizer.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns style declarations for the element
|
||||
* @param {Element} element
|
||||
*/
|
||||
var getStyles = function (element) {
|
||||
if (!element) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
|
||||
};
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
|
||||
});
|
||||
|
||||
Prism.hooks.add('complete', function (env) {
|
||||
if (!env.code) {
|
||||
return;
|
||||
}
|
||||
|
||||
// works only for <code> wrapped inside <pre> (not inline)
|
||||
var pre = env.element.parentNode;
|
||||
// Original regex check for class, leaving it here
|
||||
// for its redundancy check
|
||||
var clsReg = /\s*\bline-numbers\b\s*/;
|
||||
// New regex check for opt-out class
|
||||
var clsRegB = /\s*\bno-line-numbers\b\s*/;
|
||||
|
||||
if (env.element.querySelector(".line-numbers-rows")) {
|
||||
// Abort if line numbers already exists
|
||||
return;
|
||||
}
|
||||
|
||||
// Added to facilitate opting out
|
||||
if (clsRegB.test(pre.className)) {
|
||||
// Respect the opt-out
|
||||
return;
|
||||
}
|
||||
|
||||
if (clsReg.test(env.element.className)) {
|
||||
// Remove the class "line-numbers" from the <code>
|
||||
env.element.className = env.element.className.replace(clsReg, ' ');
|
||||
}
|
||||
if (!clsReg.test(pre.className)) {
|
||||
// Add the class "line-numbers" to the <pre>
|
||||
pre.className += ' line-numbers';
|
||||
}
|
||||
|
||||
var match = env.code.match(/\n(?!$)/g);
|
||||
var linesNum = match ? match.length + 1 : 1;
|
||||
var lineNumbersWrapper;
|
||||
|
||||
var lines = new Array(linesNum + 1);
|
||||
lines = lines.join('<span></span>');
|
||||
|
||||
lineNumbersWrapper = document.createElement('span');
|
||||
lineNumbersWrapper.setAttribute('aria-hidden', 'true');
|
||||
lineNumbersWrapper.className = 'line-numbers-rows';
|
||||
lineNumbersWrapper.innerHTML = lines;
|
||||
|
||||
if (pre.hasAttribute('data-start')) {
|
||||
pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
|
||||
}
|
||||
|
||||
env.element.appendChild(lineNumbersWrapper);
|
||||
|
||||
_resizeElement(pre);
|
||||
});
|
||||
|
||||
}());
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue