A JavaScript syntax highlighter in 40 lines of JavaScript - Cooding Dessign

A JavaScript syntax highlighter in 40 lines of JavaScript

Shantun Parmar November 28, 2020 3 Comments

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

A very simple JavaScript syntax highlighter

Failed to load latest commit information.

About

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.

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.

About

A very simple JavaScript syntax highlighter

No releases published

Sponsor this project

No packages published

You can’t perform that action at this time.

Author: Shantun Parmar

Comments are closed.

Copyright © 2021 Cooding Dessign