I’m currently writing my thesis, using LaTeX. As the programming part of my thesis was mostly done in Javascript, I have to include some bits of Javascript source code in the LaTeX document. For this I’m using the listings package. With this package you can “include the source code of any programming language within your document”. Unfortunately Javascript is not in the list of supported programming languages. (In return, the list contains languages like Oberon-2, Promela or RSL, which are probably being used way more often than Javascript … er.)
Luckily @awendt pointed me to these links: Javascript Quelltexte in LaTeX and a thread on a mailinglist. I changed those examples only a bit, I’m posting my result here mainly in the hope it will produce a Google hit for “javascript latex source code” :-)
Put this at the beginning of your document. It will define support for the Javascript language. I included the keywords that show up in my code most frequently.
\usepackage{listings}
\usepackage{color}
\definecolor{lightgray}{rgb}{.9,.9,.9}
\definecolor{darkgray}{rgb}{.4,.4,.4}
\definecolor{purple}{rgb}{0.65, 0.12, 0.82}
\lstdefinelanguage{JavaScript}{
keywords={typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break},
keywordstyle=\color{blue}\bfseries,
ndkeywords={class, export, boolean, throw, implements, import, this},
ndkeywordstyle=\color{darkgray}\bfseries,
identifierstyle=\color{black},
sensitive=false,
comment=[l]{//},
morecomment=[s]{/*}{*/},
commentstyle=\color{purple}\ttfamily,
stringstyle=\color{red}\ttfamily,
morestring=[b]',
morestring=[b]"
}Here you define the style for the newly defined language. This also belongs in the preamble of your LaTeX file.
\lstset{
language=JavaScript,
backgroundcolor=\color{lightgray},
extendedchars=true,
basicstyle=\footnotesize\ttfamily,
showstringspaces=false,
showspaces=false,
numbers=left,
numberstyle=\footnotesize,
numbersep=9pt,
tabsize=2,
breaklines=true,
showtabs=false,
captionpos=b
}The colours are just an example, read how to define more colours in the wikibook.
Now you can insert code like this. The example is nonsense, I tried to include as many keywords as possible. The medskip command before the listing inserts a linebreak, a not very nice way to have some distance between the text and the listing.
\medskip
\begin{lstlisting}[caption=My Javascript Example]
Name.prototype = {
methodName: function(params){
var doubleQuoteString = "some text";
var singleQuoteString = 'some more text';
// this is a comment
if(this.confirmed != null && typeof(this.confirmed) == Boolean && this.confirmed == true){
document.createElement('h3');
$('#system').append("This looks great");
return false;
} else {
throw new Error;
}
}
}
\end{lstlisting}The result looks like this:
Update: @perkee pointed out you can also use the minted package for syntax highlighting.
Trackbacks
Use the following link to trackback from your own site:
http://lenaherrmann.net/trackbacks?article_id=16
24 days later:
Well, you certainly got at least one hit for “lstlisting javascript” from another person writing a thesis that includes lots of JS code :D
Thanks for posting this!
about 1 month later:
Thanks for posting this. It was helpful for me too.
2 months later:
Great post - only one small err in your example. A comma seems to be lacking at the end of the keywords={} line. But thanks for the insigt, LaTeX can really do amazing stuff!
2 months later:
Ich brauche das zwar nicht für irgendeine Abschlussarbeit, aber ich mache gerade eine Latex-Präsentation für einen Javascript-Workshop. Da kann ich das gut gebrauchen. Danke!
3 months later:
Thanks
3 months later:
Deine Seite kam gleich als erstes Ergebnis der Abfrage “latex listings javascript code” über eu.ixquick.com und war mir eine große Hilfe!Vielen Dank!
5 months later:
@Ole Thanks, I fixed that!
6 months later:
I love you.
6 months later:
Thanks for this. And congrats to your thesis!
6 months later:
Thanks very much, I am also writing my (Bachelor) thesis these days and this was very useful! I also found a way to generate documentation from JavaScript Sources using Doxygen the other day (see my blog for a German how to).
Cheers, Johannes