You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
paste/views/highlight.pug

51 lines
2.0 KiB
Plaintext

extends layout
block head
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/themes/prism-coy.css')
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/toolbar/prism-toolbar.css')
link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/line-numbers/prism-line-numbers.css')
style.
html, body, .code-toolbar, pre, code {
height: 100%;
}
pre[class*="language-"] {
margin: 0;
}
pre[class*="language-"]::before, pre[class*="language-"]::after {
display: none;
}
.code-toolbar > .toolbar {
top: 1rem;
right: 1rem;
opacity: 1;
}
pre[class*="language-"] > code {
border-left: none;
}
.code-toolbar > .toolbar a, .code-toolbar > .toolbar button, .code-toolbar > .toolbar span {
padding: 0.25rem 1rem 0.5rem;
font-size: 1.2rem;
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
border-radius: .3rem;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.code-toolbar > .toolbar a:hover, .code-toolbar > .toolbar a:focus, .code-toolbar > .toolbar button:hover, .code-toolbar > .toolbar button:focus, .code-toolbar > .toolbar span:hover, .code-toolbar > .toolbar span:focus {
color: #fff;
background-color: #025aa5;
opacity: 1;
}
block content
pre.line-numbers
code(class='language-' + lang)
| #{paste}
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/prism.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/components/prism-' + lang + '.min.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/toolbar/prism-toolbar.min.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/line-numbers/prism-line-numbers.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js')
script(src='https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js')