This example shows how to use the listings package to syntax highlight code in LaTeX. It highlights multiple languages: CSS, HTML and JavaScript.
This example is being developed collaboratively in response to this question on the TeX StackExchange. Improvements welcome!
\documentclass{scrreprt}
\makeatletter
\usepackage{color}
\definecolor{lightgray}{rgb}{0.95, 0.95, 0.95}
\definecolor{darkgray}{rgb}{0.4, 0.4, 0.4}
%\definecolor{purple}{rgb}{0.65, 0.12, 0.82}
\definecolor{editorGray}{rgb}{0.95, 0.95, 0.95}
\definecolor{editorOcher}{rgb}{1, 0.5, 0} % #FF7F00 -> rgb(239, 169, 0)
\definecolor{editorGreen}{rgb}{0, 0.5, 0} % #007C00 -> rgb(0, 124, 0)
\definecolor{orange}{rgb}{1,0.45,0.13}
\definecolor{olive}{rgb}{0.17,0.59,0.20}
\definecolor{brown}{rgb}{0.69,0.31,0.31}
\definecolor{purple}{rgb}{0.38,0.18,0.81}
\definecolor{lightblue}{rgb}{0.1,0.57,0.7}
\definecolor{lightred}{rgb}{1,0.4,0.5}
\usepackage{upquote}
\usepackage{listings}
% CSS
\lstdefinelanguage{CSS}{
keywords={color,background-image:,margin,padding,font,weight,display,position,top,left,right,bottom,list,style,border,size,white,space,min,width, transition:, transform:, transition-property, transition-duration, transition-timing-function},
sensitive=true,
morecomment=[l]{//},
morecomment=[s]{/*}{*/},
morestring=[b]',
morestring=[b]",
alsoletter={:},
alsodigit={-}
}
% JavaScript
\lstdefinelanguage{JavaScript}{
morekeywords={typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break},
morecomment=[s]{/*}{*/},
morecomment=[l]//,
morestring=[b]",
morestring=[b]'
}
\lstdefinelanguage{HTML5}{
language=html,
sensitive=true,
alsoletter={<>=-},
morecomment=[s]{<!-}{-->},
tag=[s],
otherkeywords={
% General
>,
% Standard tags
<!DOCTYPE,
</html, <html, <head, <title, </title, <style, </style, <link, </head, <meta, />,
% body
</body, <body,
% Divs
</div, <div, </div>,
% Paragraphs
</p, <p, </p>,
% scripts
</script, <script,
% More tags...
<canvas, /canvas>, <svg, <rect, <animateTransform, </rect>, </svg>, <video, <source, <iframe, </iframe>, </video>, <image, </image>, <header, </header, <article, </article
},
ndkeywords={
% General
=,
% HTML attributes
charset=, src=, id=, width=, height=, style=, type=, rel=, href=,
% SVG attributes
fill=, attributeName=, begin=, dur=, from=, to=, poster=, controls=, x=, y=, repeatCount=, xlink:href=,
% properties
margin:, padding:, background-image:, border:, top:, left:, position:, width:, height:, margin-top:, margin-bottom:, font-size:, line-height:,
% CSS3 properties
transform:, -moz-transform:, -webkit-transform:,
animation:, -webkit-animation:,
transition:, transition-duration:, transition-property:, transition-timing-function:,
}
}
\lstdefinestyle{htmlcssjs} {%
% General design
% backgroundcolor=\color{editorGray},
basicstyle={\footnotesize\ttfamily},
frame=b,
% line-numbers
xleftmargin={0.75cm},
numbers=left,
stepnumber=1,
firstnumber=1,
numberfirstline=true,
% Code design
identifierstyle=\color{black},
keywordstyle=\color{blue}\bfseries,
ndkeywordstyle=\color{editorGreen}\bfseries,
stringstyle=\color{editorOcher}\ttfamily,
commentstyle=\color{brown}\ttfamily,
% Code
language=HTML5,
alsolanguage=JavaScript,
alsodigit={.:;},
tabsize=2,
showtabs=false,
showspaces=false,
showstringspaces=false,
extendedchars=true,
breaklines=true,
% German umlauts
literate=%
{Ö}{{\"O}}1
{Ä}{{\"A}}1
{Ü}{{\"U}}1
{ß}{{\ss}}1
{ü}{{\"u}}1
{ä}{{\"a}}1
{ö}{{\"o}}1
}
%
\lstdefinestyle{py} {%
language=python,
literate=%
*{0}{{{\color{lightred}0}}}1
{1}{{{\color{lightred}1}}}1
{2}{{{\color{lightred}2}}}1
{3}{{{\color{lightred}3}}}1
{4}{{{\color{lightred}4}}}1
{5}{{{\color{lightred}5}}}1
{6}{{{\color{lightred}6}}}1
{7}{{{\color{lightred}7}}}1
{8}{{{\color{lightred}8}}}1
{9}{{{\color{lightred}9}}}1,
basicstyle=\footnotesize\ttfamily, % Standardschrift
numbers=left, % Ort der Zeilennummern
%numberstyle=\tiny, % Stil der Zeilennummern
%stepnumber=2, % Abstand zwischen den Zeilennummern
numbersep=5pt, % Abstand der Nummern zum Text
tabsize=4, % Groesse von Tabs
extendedchars=true, %
breaklines=true, % Zeilen werden Umgebrochen
keywordstyle=\color{blue}\bfseries,
frame=b,
commentstyle=\color{brown}\itshape,
stringstyle=\color{editorOcher}\ttfamily, % Farbe der String
showspaces=false, % Leerzeichen anzeigen ?
showtabs=false, % Tabs anzeigen ?
xleftmargin=17pt,
framexleftmargin=17pt,
framexrightmargin=5pt,
framexbottommargin=4pt,
%backgroundcolor=\color{lightgray},
showstringspaces=false, % Leerzeichen in Strings anzeigen ?
}%
%
\makeatother
\begin{document}
\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html>
<head>
<title>Listings Style Test</title>
<meta charset="UTF-8">
<style>
/* CSS Test */
* {
padding: 0;
border: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="css/style.css" />
</head>
<header> hey </header>
<article> this is a article </article>
<body>
<!-- Paragraphs are fine -->
<div id="box">
<p>
Hello World
</p>
<p>Hello World</p>
<p id="test">Hello World</p>
<p></p>
</div>
<div>Test</div>
<!-- HTML script is not consistent -->
<script src="js/benchmark.js"></script>
<script>
function createSquare(x, y) {
// This is a comment.
var square = document.createElement('div');
square.style.width = square.style.height = '50px';
square.style.backgroundColor = 'blue';
/*
* This is another comment.
*/
square.style.position = 'absolute';
square.style.left = x + 'px';
square.style.top = y + 'px';
var body = document.getElementsByTagName('body')[0];
body.appendChild(square);
};
// Please take a look at +=
window.addEventListener('mousedown', function(event) {
// German umlaut test: Berührungspunkt ermitteln
var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
var lookAtThis += 1;
});
</script>
</body>
</html>
\end{lstlisting}
\begin{lstlisting}[style=htmlcssjs]
@media only screen and (min-width: 768px) and (max-width: 991px) {
#main {
width: 712px;
padding: 100px 28px 120px;
}
/* .mono {
font-size: 90%;
} */
.cssbtn a {
margin-top: 10px;
margin-bottom: 10px;
width: 60px;
height: 60px;
font-size: 28px;
line-height: 62px;
}
\end{lstlisting}
\begin{lstlisting} [style=py]
class TelgramRequestHandler(object):
def handle(self):
addr = self.client_address[0] # Client IP-adress
telgram = self.request.recv(1024) # Recieve telgram
print "From: %s, Received: %s" % (addr, telgram)
return
\end{lstlisting}
\begin{lstlisting}[style=htmlcssjs]
@media only screen and (min-width: 768px) and (max-width: 991px) {
#main {
width: 712px;
padding: 100px 28px 120px;
}
/* .mono {
font-size: 90%;
} */
.cssbtn a {
margin-top: 10px;
margin-bottom: 10px;
width: 60px;
height: 60px;
font-size: 28px;
line-height: 62px;
}
\end{lstlisting}
\end{document}