DEV Community

loading...
Cover image for JavaScript Syntax Highlighter

JavaScript Syntax Highlighter

victorqribeiro profile image Victor Ribeiro Originally published at github.com ・1 min read

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.

Discussion

pic
Editor guide