inspec/www/source/stylesheets/_code.scss

//default

code {
	color: $color_paragraph;
	border: 0px;
	background: white;
}

.highlight code {
	color: white;
	background: $color_paragraph;
	padding-left: 0;
}

pre {
	border-radius: 7px;
    padding: 10px;
    margin-bottom: 1em;
    background: $color_paragraph;
    border: $color_paragraph;
    color: white
}

// Container for code example

.code-example {
	padding: $percent_sm;
	border-radius: 7px;
	background: $color_heading;
}

// Container for pop-up code example

.code-pop {
	padding: $percent_sm/2;
	background: $color_heading;
	//display:none; //Hide until click trigger is applied
	p {
		margin: 0;
	}
}

// Code Font Colors

.code-demo {
	color: $color_white;
	border: 0;
	background: $color_heading;
}

.code-attribute {
	color: $color_purple;
}

.code-token {
	color: $color_code_token;
}

.code-comment {
	opacity: 0.6;
}

// Indentation

.indent {
	padding-left: 1em;
	word-wrap: normal;
}

//Animation for type ahead animation

.code-pop-animate { //Target
	font-family: Consolas,Liberation Mono,Courier,monospace;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 auto;
	-webkit-animation-delay: 6s;
	animation-delay: 6;
	-moz-animation-delay: 6s;
	animation: type 6s steps(41, end);
	-moz-animation: type 6s steps(41, end);
	-webkit-animation: type 6s steps(41, end);
}

//Click event trigger {
.code-trigger{
	cursor: pointer;
}

.code-animate { //typing animation for fode
	animation: type 6s steps(41, end);
	-moz-animation: type 6s steps(41, end);
	-webkit-animation: type 6s steps(41, end);
}

@keyframes type {
  from { width: 0; }
	to { width:100%; }
}

@-webkit-keyframes type {
  from { width: 0; }
	to { width:100%; }
}