es_listing.tex

\documentclass[10pt]{article}
\usepackage[margin=2.5cm]{geometry} % for margins on a A4paper

\usepackage{listings}
\usepackage{color}
\usepackage{textcomp} % for upquote
\usepackage{tcolorbox}
\tcbuselibrary{listings,skins, breakable}   

\usepackage{kantlipsum}
%
% ECMAScript 2015 (ES6) definition by Gary Hammock
%

\lstdefinelanguage[ECMAScript2015]{JavaScript}[]{JavaScript}{
	morekeywords=[1]{await, async, case, catch, class, const, debugger, default, do,
		enum,  extends, finally, from, implements, instanceof,
		let, static, super, switch, throw, try},
	morekeywords=[2]{export, import, implements, package, private, protected, public, static
	},
	morestring=[b]` % Interpolation strings.
}


%
% JavaScript version 1.1 by Gary Hammock
%
% Reference:
%   B. Eich and C. Rand Mckinney, "JavaScript Language Specification
%     (Preliminary Draft)", JavaScript 1.1.  1996-11-18.  [Online]
%     http://hepunx.rl.ac.uk/~adye/jsspec11/titlepg2.htm
%

\lstdefinelanguage{JavaScript}{
	morekeywords=[1]{break, continue, delete, else, for, function, if, in,
		new, return, this, typeof, var, void, while, with, yield},
	% Literals, primitive types, and reference types.
	morekeywords=[2]{false, null, true, boolean, number, undefined,
		Array, Boolean, Date, Math, Number, String, Object},
	% Built-ins.
	morekeywords=[3]{eval, parseInt, parseFloat, escape, unescape, console},
	sensitive,
	morecomment=[s]{/*}{*/},
	morecomment=[l]//,
	morecomment=[s]{/**}{*/}, % JavaDoc style comments
	morestring=[b]',
	morestring=[b]"
}[keywords, comments, strings]


\lstalias[]{ES6}[ECMAScript2015]{JavaScript}

% Requires package: color.
\definecolor{mediumgray}{rgb}{0.3, 0.4, 0.4}
\definecolor{mediumblue}{rgb}{0.0, 0.0, 0.8}
\definecolor{forestgreen}{rgb}{0.13, 0.55, 0.13}
\definecolor{darkviolet}{rgb}{0.58, 0.0, 0.83}
\definecolor{royalblue}{rgb}{0.25, 0.41, 0.88}
\definecolor{crimson}{rgb}{0.86, 0.8, 0.24}

\lstdefinestyle{JSES6Base}{
	basicstyle=\ttfamily\small,
	breakatwhitespace=true,
	breaklines=true,
	captionpos=b,
	columns=fullflexible,
	commentstyle=\color{mediumgray}\upshape,
	emph={},
	emphstyle=\color{crimson},
	extendedchars=true,  % requires inputenc
	identifierstyle=\color{black},
	keepspaces=true,
	keywordstyle=\color{mediumblue},
	keywordstyle={[2]\color{darkviolet}},
	keywordstyle={[3]\color{royalblue}},
	numbers=left,
	numbersep=2pt,
	numberstyle=\tiny\color{black},
	rulecolor=\color{red},
	showlines=true,
	showspaces=false,
	showstringspaces=false,
	showtabs=false,
	stringstyle=\color{forestgreen},
	tabsize=2,
	title=\lstname,
	upquote=true  % requires textcomp
}

\lstdefinestyle{JavaScript}{
	language=JavaScript,
	style=JSES6Base
}
\lstdefinestyle{ES6}{
	language=ES6,
	style=JSES6Base
}

\begin{document}

\kant[1-3]

\begin{tcblisting}{colback=red!5!white,colframe=red!75!black,fonttitle=\bfseries,
		listing only, breakable,
		title=Samples for JavaScript and ES6,enhanced,drop fuzzy shadow,
		listing style=ES6
	}
//Option 1 - Use try catch within the function
async function doubleAndAdd(a, b) {
	try {
		a = await doubleAfter1Sec(a);
		b = await doubleAfter1Sec(b);
	} catch (e) {
		return NaN; //return something
	}
	return a + b;
}

//New usage:
doubleAndAdd('one', 2).then(console.log); // NaN
doubleAndAdd(1, 2).then(console.log); // 6

function doubleAfter1Sec(param) {
	return new Promise((resolve, reject) => {
		setTimeout(function() {
			let val = param * 2;
			isNaN(val) ? reject(NaN) : resolve(val);
		}, 1000);
	});
}


	// Old Syntax
	function oldOne() {
		console.log('Hello World..!');
	}
	// New Syntax in ES6
	var newOne = () => {
		console.log('Hello World..!');
	}
\end{tcblisting}
\end{document}