# \listings code style for HTML5 (CSS, HTML, JavaScript)

I would like to create a code style for HTML5 that can be used with the \listings package.

An HTML5 document consists of three languages: CSS, HTML and JavaScript. That makes the whole thing a bit more complicated, because one can only define a keyword field for three languages.

I oriented myself on the style of the NetBeans IDE (Screenshot). I have come very far. Nevertheless, there are some problems ...

Bug #1 The keyword canvas occurs both as an HTML tag and a variable. I want the HTML tag to be blue but not the JavaScript variable within the <script> block.

Bug #2 Because I make blue slashes for the ending HTML tags, the forward slashes in my JavaScript texts also get blue.

Missing Feature #3 Identifiers (#square, .box) in the CSS code are not green.

Can anyone help me to solve these problems? I don't want to use \minted because I've got already a lot of code with \listings in my documents.

I have also created a minimal working example:

\documentclass{scrreprt}
\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{ocherCode}{rgb}{1, 0.5, 0} % #FF7F00 -> rgb(239, 169, 0)
\definecolor{blueCode}{rgb}{0, 0, 0.93} % #0000EE -> rgb(0, 0, 238)
\definecolor{greenCode}{rgb}{0, 0.6, 0} % #009900 -> rgb(0, 153, 0)
\usepackage{upquote}
\usepackage{listings}
\makeatletter
\lstdefinelanguage{HTML5}{
sensitive=true,
keywords={%
% JavaScript
typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break,
% HTML
html, title, meta, style, head, body, script, canvas,
% CSS
border:, transform:, -moz-transform:, transition-duration:, transition-property:,
transition-timing-function:
},
% http://texblog.org/tag/otherkeywords/
otherkeywords={<, >, \/},
ndkeywords={class, export, boolean, throw, implements, import, this},
comment=[l]{//},
% morecomment=[s][keywordstyle]{<}{>},
morecomment=[s]{/*}{*/},
morecomment=[s]{<!}{>},
morestring=[b]',
morestring=[b]",
alsoletter={-},
alsodigit={:}
}
\lstset{%
% Basic design
backgroundcolor=\color{lightgray},
basicstyle={\small\ttfamily},
frame=l,
% Line numbers
xleftmargin={0.75cm},
numbers=left,
stepnumber=1,
firstnumber=1,
numberfirstline=true,
% Code design
identifierstyle=\color{black},
keywordstyle=\color{blue}\bfseries,
ndkeywordstyle=\color{greenCode}\bfseries,
stringstyle=\color{ocherCode}\ttfamily,
% Code
language={HTML5},
tabsize=2,
showtabs=false,
showspaces=false,
showstringspaces=false,
extendedchars=true,
breaklines=true
}
\makeatother
\begin{document}
\begin{lstlisting}
<!DOCTYPE html>
<html>
<title>Canvas-Rotation</title>
<meta charset="UTF-8" />
<style>
#square {
border: 1px solid black;
transform: scale(10) rotate(3deg) translateX(0px);
-moz-transform: scale(10) rotate(3deg) translateX(0px);
}

.box {
transition-duration: 2s;
transition-property: transform;
transition-timing-function: linear;
}
</style>
<body>
<canvas id="square" width="200" height="200"></canvas>
<script>
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;

var image = new Image();
image.src = 'images/card.png';
image.width = 114;
image.height = 158;
image.onload = window.setInterval(function() {
rotation();
}, 1000/60);
</script>
</body>
</html>
\end{lstlisting}
\end{document}


I know that the task is pretty tough! But maybe we can do that collectively?

An HTML5 code formatting could be used universally.

P.S. I have read that there are commands like usekeywordsintag and tagstyle. But everytime I want to use them I get the error:

! Package keyval Error: tagstyle undefined.

-
You can only use usekeywordsintag if you use language=html somewhere in your \lstdefinelanguage. From the listings manual, page 28, "The package either use the first order keywords in tags or prints all identifiers inside <> in keyword style." –  hpesoj626 Feb 22 '13 at 22:57
Thank you. This brings me a little further! –  Benny Neugebauer Feb 23 '13 at 10:32
I think that the cleanest way would be to switch the language on keywords style and script. However, listings don't seem to provide such an option. (And neither could I discover a way to hack it in.) I think that this would be a nice feature to have (given that the mixture of languages in a single file or code chunk is becoming more and more common). Maybe you could put forth a feature request to the author/maintainer of listings? –  Sašo Živanović Feb 23 '13 at 18:56

Update: I am still improving the code style. You can find the latest version here: https://www.writelatex.com/74567mmxwkw - I appreciate anyone who is testing :)

After much trial and error and the help of people here from the community I have come to a very attractive result.

Screenshot:

The code is pretty intense, but it works. It would be nice if others could try it. Thus it is ensured that there are no errors. Unfortunately, all HTML elements and attributes, and CSS properties have to be entered manually. Maybe we can put together a list of all these items?

Together with the W3C specification it should be possible.

Here is the code:

\documentclass{scrreprt}
\usepackage{color}
\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)
\usepackage{upquote}
\usepackage{listings}
\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={<>=-},
otherkeywords={
% HTML tags
<html>, <head>, <title>, </title>, <meta, />, </head>, <body>,
<canvas, \/canvas>, <script>, </script>, </body>, </html>, <!, html>, <style>, </style>, ><
},
ndkeywords={
% General
=,
% HTML attributes
charset=, id=, width=, height=,
% CSS properties
border:, transform:, -moz-transform:, transition-duration:, transition-property:, transition-timing-function:
},
morecomment=[s]{<!--}{-->},
tag=[s]
}

\lstset{%
% Basic design
backgroundcolor=\color{editorGray},
basicstyle={\small\ttfamily},
frame=l,
% Line numbers
xleftmargin={0.75cm},
numbers=left,
stepnumber=1,
firstnumber=1,
numberfirstline=true,
% Code design
keywordstyle=\color{blue}\bfseries,
ndkeywordstyle=\color{editorGreen}\bfseries,
stringstyle=\color{editorOcher},
% Code
language=HTML5,
alsolanguage=JavaScript,
alsodigit={.:;},
tabsize=2,
showtabs=false,
showspaces=false,
showstringspaces=false,
extendedchars=true,
breaklines=true,
% Support for German umlauts
literate=%
{Ö}{{\"O}}1
{Ä}{{\"A}}1
{Ü}{{\"U}}1
{ß}{{\ss}}1
{ü}{{\"u}}1
{ä}{{\"a}}1
{ö}{{\"o}}1
}
\begin{document}
\begin{lstlisting}
<!DOCTYPE html>
<html>
<title>Canvas</title>
<meta charset="UTF-8" />
<style>
#square {
border: 1px solid black;
transform: scale(10) rotate(3deg) translateX(0px);
-moz-transform: scale(10) rotate(3deg) translateX(0px);
}

.box {
transition-duration: 2s;
transition-property: transform;
transition-timing-function: linear;
}
</style>
<body>
<canvas id="square" width="200" height="200"></canvas>
<script>
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;

var image = new Image();
image.src = 'images/card.png';
image.width = 114;
image.height = 158;
image.onload = window.setInterval(function() {
rotation();
}, 1000/60);
</script>
</body>
</html>
\end{lstlisting}
\end{document}

-
There seems to be a problem with the rendering of < in the html tag. It's black while the rest are blue. But nevertheless, great work! +1 –  hpesoj626 Feb 24 '13 at 1:51
Thanks for the info! I fixed it. You can find the updated version here: writelatex.com/74567mmxwkw –  Benny Neugebauer Feb 24 '13 at 17:20