DEV Community

Cover image for JavaScript Syntax Highlighter
Victor Ribeiro
Victor Ribeiro

Posted on • Originally published at github.com

JavaScript Syntax Highlighter

#javascript

JavaScript Syntax Highlighter

Alt Text

Live Version

How to use it

Add the file syntax.min.js to the end of your code and it will automatically highlight every <code> tag that you have in your page. Or use the defer attribute:

<script src="syntax.min.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

The script will create <spam> tag for every reserved word, variable, methods and numbers so you can target them with CSS.

code { font-family: Consolas,"courier new"; color: #EEE; background-color: #333; padding: 2px; font-size: 105%; display: block; white-space: pre; counter-reset: line; } code > div { counter-increment: line; display: block; min-height: 1em; } code > div::before { content: counter(line) '\A0'; display: inline-block; width: 4ch; text-align: left; -webkit-select: none; color: #666; } .reserved { font-weight: bold; color: #55C; } .methods { font-weight: bold; color: green; } .variable { color: orange; } .comment { color: gray; } .number { color: red; }
Enter fullscreen mode Exit fullscreen mode

Fell free to change anything you like to better suit your needs.

Source code here.

Top comments (0)