Increase token granularity for improved syntax highlighting

It would be cool to add more tokens so different parts of the code can be highlighted differently. Prism seems more granular than CodeMirror, but it’s still missing some nice tokens compared to Atom and VS Code.

For JavaScript, it would be nice to have these:

• token parameter

function add(a, b) { // <-- `a` and `b` receive `parameter`
  return a + b;
}

• token property definition and token property access

const obj = {
  example: true // <-- `example` receives `property` and `definition`
};
obj.example; // <-- `example` receives `property` and `access`

• token function method

this.func(); // `func` receives `method` if being called on an object

• token keyword module

All keywords here should receive the module token.

import { thing as thingy } from 'thing';
export default thingy;

• token keyword special

“special”(?) keywords like this

• token variable dom

window
document
navigator
performance
localStorage

• token console

console.log('hello'); // <-- `console` receives this token

• token operator spread

const copy = [...arr]; // <- `...` receives this token

[RunDevelopment]

How would I make "value" receive the string token?

This will come soon to CSS Extras with #1638 and #1671. The only difference is that I highlight your "value" not as string but as value (that’s the token name).

[RunDevelopment]

Insert this code into prism-javascript.js in line 37 and you will have most of the features.

The code

Prism.languages.insertBefore('javascript', 'punctuation', {
	'definition': {
		pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
		lookbehind: true,
		alias: 'property'
	},
	'access': {
		pattern: /(\.\s*)[a-z]\w*/i,
		lookbehind: true,
		alias: 'property'
	},
	'variable ': {
		pattern: /\b(?:window|document|navigator|performance|localStorage)\b/,
		alias: 'dom'
	},
	'console': /\bconsole\b/,
	'spread': {
		pattern: /\.{3}/,
		alias: 'punctuation'
	}
});

But let me warn you:

1. I did this quick and dirty, so it’s not perfect and no guarantees.
2. It really doesn’t look nice IMO, you will probably have to adjust the default theme you’re using.

Keep in mind that if you want to use the minified file, you will have to rebuild Prism (refer to README.md).