Highlightjs добавляем перевод строки

Ну не красиво было - скроллы даже для однострочных вставок. В blogger в настройках Тема - Изменить HTML, добавляем стиль для pre:

pre {
	white-space:pre-wrap !important
}

Прикрутил нумерацию для highlightjs 

Но у нее свои косяки, изначально просто некрасиво, а со стандартным "крутым" стилем вообще не видно, т.к. цвета что мой фон. Для себя сделал такой стиль:

.hljs-ln-numbers {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center;
	color: #0b807b;
	border-right: 1px solid #0b807b;
	vertical-align: top;
	/* your custom style here */
	padding-right: 2px  !important;
	padding-left: 0  !important;
	width:auto  !important;
}
.hljs-ln-n {
	padding: 0 3px;
}
.hljs-ln-n:before {
	display: block;
	width: max-content;
	margin: auto;
}
/* for block of code */
.hljs-ln-code {
	padding-left: 10px  !important;
}

Главный фокус - ширина колонки, неважно чему равен счетчик, все будет по красоте, в оригинале же каждый символ счетчика был на отдельной строке.

Проблема в том, что счетчик вставляется псевдоэлементом before, а тут оказывается ширину вытащить не так просто. Пытался найти решение по запросу css before width/css before width fit content, но все напрасно. В итоге, методом научного тыка пришел к варианту display: block + width: max-content.