Lightweight Javascript Syntax Highlighting Library – Syntax Highlight

Preview:

Description:

Syntax Highlight is another Javascript library that provides live syntax highlighting functionality while users type source code snippets in your web page.

How to use it:

Create an empty container.

<pre id="output" contenteditable spellcheck="false">
</pre>

Create the keyword and color theme templates.

<div id="template">
<div class="keywords"> for
in
if
while
else
function
return
var
document
querySelector
innerHTML
String
replace
split
trim
RegExp
test
length
indexOf
scrollTop
onkeyup
onload
onscroll
value
Object
Math
floor
random
class
keys
appendChild
cssText
styleSheet
createTextNode
getElementsByTagName
createElement
createTextNode
new
join
console
log
selectionStart
charAt
true
false
nodeType
childNodes
push
apply
window
getSelection
createRange
setEnd
setStart
collapse
moveEnd
moveStart
body
createTextRange
removeAllRanges
moveToElementText
selection
break
selectNodeContents
getRangeAt
deleteContents
insertNode
setStartAfter
addRange
select </div>
<div class="colortheme"> #936565
#C48686
#8E574D
#BA7D67
#AD713E
#C69060
#99701F
#B59140
#9B954B
#BCB23B 
#808E42
#9EB25F 
#539B53
#75BC75
#42845D
#5EAA7D
#0F8776 
#00A99D
#138591
#4FA4B2
#0071BC
#4DA0CE
#3062AA
#6291BF
#5462B5
#7696DD
#5E57B5
#7D7DD8
#7A5E99
#9787AD
#955AA3
#AC85B5
#A05A89
#B780A8 </div>
</div>

The CSS.

#output {
position: fixed;
top: 40px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
padding: 2em 10%;
color: #7e7d7c;
white-space: pre-wrap;
overflow: scroll;
padding: 2em 10%;
font-weight: 400;
-webkit-transition: opacity 0.2s;
-webkit-overflow-scrolling: touch;
}
#template {
display: none;
}
.num {
font-weight: 600;
color: #444444;
}
 [class*=var] {
 font-weight: 600;
}
.clr {
border-radius: 1px;
color: white;
font-weight: 400;
}
.str, .str i {
color: #d10000 !important;
font-weight: 400 !important;
}
.reg, .reg i {
color: #e97900;
font-weight: 500;
}
.cmnt, .cmnt i {
color: #8db8aa !important;
font-weight: 400 !important;
}
 @media (min-width: 1400px) {
#output {
padding: 2em 20%;
}
}
@media (max-width: 700px) {
#output {
padding: 1em;
}
}
@media (max-width: 400px) {
html {
font-size: 12px;
}
}

Include the  Syntax Highlight javascript library at the end of the document.

<script type="text/javascript" src="script.js"></script>

Changelog:

06/13/2018

• v2