JezK

Edit File: prism.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%);
	}
}