@microflash/rehype-starry-night/src/index.css

rehype plugin to highlight codeblocks with Starry Night

.hl {
	--hlFontFamily: var(--hl-font-mono);
	--hlBgColor: var(--hl-bg-color);
	--hlBorderThickness: var(--hl-border-thickness, 1px);
	--hlBorderColor: var(--hl-border-color);
	--hlBorderRadius: var(--hl-border-radius, 8px);
	--hlBorder: var(--hlBorderThickness) solid var(--hlBorderColor);
	--hlOutlineColor: var(--hl-outline-color);
	--hlOutlineThickness: var(--hl-outline-thickness, 3px);
	--hlPadding: var(--hl-line-padding, 1ch);
	--hlLineColor: var(--color-prettylights-syntax-comment);
	--hlLineBgColor: transparent;
	--hlLineBorderWidth: var(--hl-line-border-width, 2px);
	--hlLineBorderColor: var(--hl-line-border-color, transparent);
	--hlPromptColor: var(--hl-prompt-color, var(--color-prettylights-syntax-markup-deleted-text));
	background-color: var(--hlBgColor);
	border: var(--hlBorder);
	border-radius: var(--hlBorderRadius);
}

.hl-header {
	font-weight: 500;
	font-size: 0.9em;
	padding: calc(var(--hlPadding) / 2) var(--hlPadding);
	border-bottom: var(--hlBorder);
}

.hl-footer {
	font-size: 0.8em;
	padding: calc(var(--hlPadding) / 2) var(--hlPadding);
	border-top: var(--hlBorder);
}

.hl-language {
	font-family: var(--hlFontFamily);
	max-width: fit-content;
	user-select: none;
}

.hl pre {
	font-family: var(--hlFontFamily);
}

.hl pre:focus-within {
	outline-style: solid;
	outline-color: var(--hlOutlineColor);
	outline-width: var(--hlOutlineThickness);
}

.hl pre code {
	padding: var(--hlPadding);
}

.hl pre code[style*="--hl-line-gutter"] {
	display: grid;
	padding-inline: 0;
}

.hl pre [data-line-number] {
	border-left: var(--hlLineBorderWidth) solid var(--hlLineBorderColor);
	background-color: var(--hlLineBgColor);
	padding-inline: var(--hlPadding);
}

.hl pre [data-line-number]:focus:not(:focus-visible),
.hl pre [data-line-number]:hover {
	--hlLineColor: currentColor;
	--hlLineBorderColor: currentColor;
	--hlLineBgColor: var(--hl-line-active-bg-color);
}

.hl pre [data-line-number] .diff {
	color: var(--hlLineBorderColor);
}

.hl pre [data-line-number]:not(:only-child)::before {
	display: inline-block;
	content: attr(data-line-number);
	color: var(--hlLineColor);
	inline-size: calc(var(--hl-line-gutter) * 1ch);
	text-align: end;
	margin-inline-end: 1ch;
}

.hl pre [data-line-marked] {
	--hlLineColor: var(--color-prettylights-syntax-comment);
	--hlLineBorderColor: var(--hlLineColor);
	--hlLineBgColor: var(--hl-line-marked-bg-color);
}

.hl pre [data-line-inserted] {
	--hlLineColor: var(--hl-line-inserted-color);
	--hlLineBorderColor: var(--hlLineColor);
	--hlLineBgColor: var(--hl-line-inserted-bg-color);
}

.hl pre [data-line-deleted] {
	--hlLineColor: var(--hl-line-deleted-color);
	--hlLineBorderColor: var(--hlLineColor);
	--hlLineBgColor: var(--hl-line-deleted-bg-color);
}

.hl pre [data-line-output] {
	user-select: none;
}

.hl .prompt::before {
	content: "";
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 20l6.5-9m6.5 9C13 20 13 4 7 4'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	color: var(--hlPromptColor);
	text-decoration: none;
	user-select: none;
	vertical-align: middle;
	margin-right: 0.5ch;
}