Biblioteca ligera de resaltado de sintaxis de JavaScript-resaltado de sintaxis

Vista prévia

Descripción

Resaltado de sintaxis es otra biblioteca de JavaScript que proporciona la sintaxis en vivo destacando la funcionalidad mientras que los usuarios escribir fragmentos de código fuente en su página web.

Funcionamiento

Cree un contenedor vacío.

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

Cree las plantillas de palabras clave y tema de color.

<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>

El 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;
}
}

Incluya la biblioteca JavaScript de resaltado de sintaxis al final del documento.

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

Registro de cambios

06/13/2018

• v2