prism-line-highlight.css
2e74391c0d8edev

prism-line-highlight.css
View Options

			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;
			}

			@media print {
			.line-highlight {
			/*
			* This will prevent browsers from replacing the background color with white.
			* It's necessary because the element is layered on top of the displayed code.
			*/
			-webkit-print-color-adjust: exact;
			color-adjust: exact;
			}
			}

			.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);
			}