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 :)
If you want to get a copy of the source code, you can get it here: https://dl.dropboxusercontent.com/u/74217418/stackexchange/tex/html5_listings_sample.tex
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,
commentstyle=\color{darkgray}\ttfamily,
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>
<head>
<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>
</head>
<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}
Best Answer
Short answer: you'll almost certainly need to start from scratch. Converting TeX to HTML is certainly possible, but almost always focusses on persevering logical structure with the assumption that CSS can be added 'later' to deal with appearance. The two beasts are different, so what makes sense for TeX doesn't necessarily for HTML. In particular, you are not going to get anything like the look of a well-produced HTML presentation out of such a process, and as presentation is really about the visual will then spend almost certainly as long reworking what you've got as you would have on new material.