Website is upgrading. We will get back soon with latest updates. Thanks for your kind support.


Suggested keywords:

A JavaScript syntax highlighter in 40 lines of JavaScript


GitHub – victorqribeiro/syntax: A very simple JavaScript syntax highlighter

A very simple JavaScript syntax highlighter



Failed to load latest commit information.



Latest commit message

Commit time

Nov 27, 2020

Nov 27, 2020

Nov 27, 2020

Nov 27, 2020

Nov 27, 2020

Nov 27, 2020

Nov 27, 2020

Nov 27, 2020



A simple JavaScript syntax highlighter to be used when share code in a html page. Very easy to add new rules or to change the reserved words or methods.

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>

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;

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


A very simple JavaScript syntax highlighter



No releases published

Sponsor this project

No packages published

You can’t perform that action at this time.

You should write because you love the shape of Flow and sentences and the creation of different words on a page.
Social Media

Leave a Reply


to Our Newsletter