@font-face {
    font-family: 'FontWithASyntaxHighlighter';
    src: url('hl.woff2') format('woff2');
}

@font-palette-values --customPalette {
    font-family: 'FontWithASyntaxHighlighter';
    override-colors:
    	0 red, /* keywords, {} */
    	1 green, /* comments */
    	2 darkred, /* literals */
    	3 purple, /* numbers */
    	4 blue, /* functions, [] */
    	5 darkorange, /* js others */
    	6 black, /* not in use */
    	7 magenta, /* inside quotes, css properties, few chars */
    	8 navy /* few chars */
    ;
}

.hlCode {
    font-family: 'FontWithASyntaxHighlighter', monospace;
    font-palette: --customPalette;
    padding: 1rem;
}

.hlCode::selection {
	background: rgba(0, 128, 128, .4);
}