84 lines
2.1 KiB
SCSS
84 lines
2.1 KiB
SCSS
@import '~prismjs/themes/prism.css';
|
|
@import '~prismjs/plugins/line-numbers/prism-line-numbers.css';
|
|
@import '~prismjs/plugins/toolbar/prism-toolbar.css';
|
|
@import '~prismjs/plugins/inline-color/prism-inline-color.css';
|
|
@import '~prismjs/plugins/previewers/prism-previewers.css';
|
|
@import '~prismjs/plugins/autolinker/prism-autolinker.css';
|
|
|
|
/* These lines are taken from '~prismjs/plugins/inline-color/prism-inline-color.css', adjusted to avoid autoprefixer
|
|
complaining about deprecated syntax. Ideally, they can be removed if the file in question is updated. */
|
|
|
|
pre[data-line] {
|
|
position: relative;
|
|
padding-block: 1em;
|
|
padding-inline: 3em 0;
|
|
}
|
|
|
|
.line-highlight {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
padding: inherit;
|
|
margin-block-start: 1em;
|
|
background: hsl(24deg 20% 50% / 8%);
|
|
background: linear-gradient(to right, hsl(24deg 20% 50% / 10%) 70%, hsl(24deg 20% 50% / 0%));
|
|
pointer-events: none;
|
|
line-height: inherit;
|
|
white-space: pre;
|
|
|
|
@media print {
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
&::before, &[data-end]::after {
|
|
content: attr(data-start);
|
|
position: absolute;
|
|
inset-block-start: .4em;
|
|
inset-inline-start: .6em;
|
|
min-inline-size: 1em;
|
|
padding-block: 0;
|
|
padding-inline: .5em;
|
|
background-color: hsl(24deg 20% 50% / 40%);
|
|
color: hsl(24deg 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;
|
|
}
|
|
|
|
&[data-end]::after {
|
|
content: attr(data-end);
|
|
inset-block: auto .4em;
|
|
}
|
|
|
|
.line-numbers &::before, .line-numbers &::after {
|
|
content: none;
|
|
}
|
|
|
|
/* Additional fixes to the behaviour of line highlighting with certain themes. */
|
|
|
|
.is-style-prism-coy-without-shadows pre[class*="language-"] & {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
:not(.is-style-prism-shades-of-purple) pre[class*="language-"].line-numbers & {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin-block: 1em 0;
|
|
margin-inline: 0;
|
|
}
|
|
}
|
|
|
|
pre[id].linkable-line-numbers span.line-numbers-rows {
|
|
pointer-events: all;
|
|
|
|
> span::before {
|
|
cursor: pointer;
|
|
}
|
|
|
|
> span:hover::before {
|
|
background-color: rgb(128 128 128 / 20%);
|
|
}
|
|
}
|