html-lexer/test/style/tokens.css

An HTML5 lexer

html, body {
	color:white;
	background:#202020;
}

/** Styles for the tokens **/

pre, code { 
  font-size:13px;
	color:white;
	background:#202020;
	font-family:Menlo, Monaco, Monospace;
	tab-size:2;
}

/* Extras */

.error {
	display:inline-block;
	width:0;
	padding-left:20px;
	margin-left:-10px;
	overflow:hidden;
	position:absolute;
	z-index:100;
	border-bottom: 1px dotted red;
	margin-top:-1px;
}

.error:hover {
	padding:1px 4px;
	margin-top:-1px;
	border:none;
	width:auto;
	overflow:none;
	background-color:red;
}

/* html colors */

/* html colors */

.commentStart,
.commentStartBogus,
.commentData,
.commentEnd,
.commentEndBogus,
.space {
	color:#746D74;
}

.attributeValueStart,
.attributeValueData,
.attributeValueEnd {
	color: #8F9D6A;
}

.charRefLegacy,
.charRefDecimal,
.charRefHex,
.charRefNamed {
	color: #DDF7AC;
}

.charRefDecimal,
.charRefHex,
.charRefNamed {
	/* color:#E9784F; */
}

.startTagStart,
.endTagStart,
.tagName,
.tagEnd,
.tagEndAutoclose {
	color:#B38243;
}

.attributeAssign,
.attributeName {
	color: #D4BD7F;
}

.lessThanSign,
.uncodedAmpersand {
	background:#60315A;
}

.endTagPrefix {
  text-decoration:underline;
}


/** Some additional stying for the rest of the sample page **/

html, body {
	color:#202020;
	background:white;
  margin:0; padding:0;
  font-size:24px;
}

body {
	font-family:Helvetica, Arial, Sans;
  font-size:16px;
  line-height:1rem;
}

body {
  padding:0 1rem;
}
h1 {
  font-size:48px;
  line-height:2rem;
  min-height:2rem;
}
pre#colors, pre#inspector {
  display:block;
  line-height:1rem;
  padding:.7rem 1rem 1.3rem;
  border-radius:.3rem;
}

#colors {
  cursor:default;
}
#colors span {
  padding:.15rem 0;
  border-radius:.1rem;
}
#colors span:hover {
  background:#444;
}