35

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 ...

enter image description here

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,
    commentstyle=\color{darkgray}\ttfamily,
    % Code
    language={HTML5},
    tabsize=2,
    showtabs=false,
    showspaces=false,
    showstringspaces=false,
    extendedchars=true,
    breaklines=true
}
\makeatother
\begin{document}
    \begin{lstlisting}
<!DOCTYPE html>
<html>
  <head>
    <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>
  </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}

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.
3
  • 1
    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
    Commented Feb 22, 2013 at 22:57
  • 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? Commented Feb 23, 2013 at 18:56
  • This is an attempt to create a javaScript listing for ES6, Node.js, Express.js, Jasmine etc. into: github.com/xgirma/latex-javaScript Commented May 21, 2017 at 11:17

2 Answers 2

32

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:

enter image description here

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}
5
  • 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
    Commented Feb 24, 2013 at 1:51
  • Thanks for the info! I fixed it. You can find the updated version here: writelatex.com/74567mmxwkw
    – Benny Code
    Commented Feb 24, 2013 at 17:20
  • The link doesn't work anymore, it points to a file without proper definitions.
    – mgol
    Commented Nov 11, 2014 at 22:39
  • Thanks for mentioning it. Maybe someone has overwritten it. I will check if I have a backup.
    – Benny Code
    Commented Nov 12, 2014 at 12:20
  • I restored the last working version. You can also get a backup copy here: dl.dropboxusercontent.com/u/74217418/stackexchange/tex/…
    – Benny Code
    Commented Nov 12, 2014 at 12:23
14

I too think this is a great idea!

As you suggested fetching the html tags and attributes from documentation, I went to the MDN page and found out they have all that info in a single html page. Based on another question by you, I've applied the same structure to all the tags, and it does work. Took me a while to realize that the order I was declaring each tag mattered, but a quick sorting fixed the issue. I repeated the process with the attributes too, so those two should be complete. For the CSS, however, I used a previous work I found somewhere else some days ago, so I'm not that sure.

Here's the code you posted at writelatex.com with all that data in place:

    \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={break, case, catch, continue, debugger, default, delete,         do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with},
      morecomment=[s]{/*}{*/},
      morecomment=[l]//,
      morestring=[b]",
      morestring=[b]'
    }
    \lstdefinelanguage{CSS}{
      keywords={accelerator,azimuth,background,background-attachment,
            background-color,background-image,background-position,
            background-position-x,background-position-y,background-repeat,
            behavior,border,border-bottom,border-bottom-color,
            border-bottom-style,border-bottom-width,border-collapse,
            border-color,border-left,border-left-color,border-left-style,
            border-left-width,border-right,border-right-color,
            border-right-style,border-right-width,border-spacing,
            border-style,border-top,border-top-color,border-top-style,
            border-top-width,border-width,bottom,caption-side,clear,
            clip,color,content,counter-increment,counter-reset,cue,
            cue-after,cue-before,cursor,direction,display,elevation,
            empty-cells,filter,float,font,font-family,font-size,
            font-size-adjust,font-stretch,font-style,font-variant,
            font-weight,height,ime-mode,include-source,
            layer-background-color,layer-background-image,layout-flow,
            layout-grid,layout-grid-char,layout-grid-char-spacing,
            layout-grid-line,layout-grid-mode,layout-grid-type,left,
            letter-spacing,line-break,line-height,list-style,
            list-style-image,list-style-position,list-style-type,margin,
            margin-bottom,margin-left,margin-right,margin-top,
            marker-offset,marks,max-height,max-width,min-height,
            min-width,-moz-binding,-moz-border-radius,
            -moz-border-radius-topleft,-moz-border-radius-topright,
            -moz-border-radius-bottomright,-moz-border-radius-bottomleft,
            -moz-border-top-colors,-moz-border-right-colors,
            -moz-border-bottom-colors,-moz-border-left-colors,-moz-opacity,
            -moz-outline,-moz-outline-color,-moz-outline-style,
            -moz-outline-width,-moz-user-focus,-moz-user-input,
            -moz-user-modify,-moz-user-select,orphans,outline,
            outline-color,outline-style,outline-width,overflow,
            overflow-X,overflow-Y,padding,padding-bottom,padding-left,
            padding-right,padding-top,page,page-break-after,
            page-break-before,page-break-inside,pause,pause-after,
            pause-before,pitch,pitch-range,play-during,position,quotes,
            -replace,richness,right,ruby-align,ruby-overhang,
            ruby-position,-set-link-source,size,speak,speak-header,
            speak-numeral,speak-punctuation,speech-rate,stress,
            scrollbar-arrow-color,scrollbar-base-color,
            scrollbar-dark-shadow-color,scrollbar-face-color,
            scrollbar-highlight-color,scrollbar-shadow-color,
            scrollbar-3d-light-color,scrollbar-track-color,table-layout,
            text-align,text-align-last,text-decoration,text-indent,
            text-justify,text-overflow,text-shadow,text-transform,
            text-autospace,text-kashida-space,text-underline-position,top,
            unicode-bidi,-use-link-source,vertical-align,visibility,
            voice-family,volume,white-space,widows,width,word-break,
            word-spacing,word-wrap,writing-mode,z-index,zoom},  
      sensitive=true,
      morecomment=[l]{//},
      morecomment=[s]{/*}{*/},
      morestring=[b]',
      morestring=[b]",
      alsoletter={:},
      alsodigit={-}
    }
    \lstdefinelanguage{HTML5}{
            language=html,
            sensitive=true, 
            alsoletter={<>=-},
            otherkeywords={
            % HTML tags
            <, </, >,
            </a, <a, </a>,
            </abbr, <abbr, </abbr>,
            </address, <address, </address>,
            </area, <area, </area>,
            </area, <area, </area>,
            </article, <article, </article>,
            </aside, <aside, </aside>,
            </audio, <audio, </audio>,
            </audio, <audio, </audio>,
            </b, <b, </b>,
            </base, <base, </base>,
            </bdi, <bdi, </bdi>,
            </bdo, <bdo, </bdo>,
            </blockquote, <blockquote, </blockquote>,
            </body, <body, </body>,
            </br, <br, </br>,
            </button, <button, </button>,
            </canvas, <canvas, </canvas>,
            </caption, <caption, </caption>,
            </cite, <cite, </cite>,
            </code, <code, </code>,
            </col, <col, </col>,
            </colgroup, <colgroup, </colgroup>,
            </data, <data, </data>,
            </datalist, <datalist, </datalist>,
            </dd, <dd, </dd>,
            </del, <del, </del>,
            </details, <details, </details>,
            </dfn, <dfn, </dfn>,
            </div, <div, </div>,
            </dl, <dl, </dl>,
            </dt, <dt, </dt>,
            </em, <em, </em>,
            </embed, <embed, </embed>,
            </fieldset, <fieldset, </fieldset>,
            </figcaption, <figcaption, </figcaption>,
            </figure, <figure, </figure>,
            </footer, <footer, </footer>,
            </form, <form, </form>,
            </h1, <h1, </h1>,
            </h2, <h2, </h2>,
            </h3, <h3, </h3>,
            </h4, <h4, </h4>,
            </h5, <h5, </h5>,
            </h6, <h6, </h6>,
            </head, <head, </head>,
            </header, <header, </header>,
            </hr, <hr, </hr>,
            </html, <html, </html>,
            </i, <i, </i>,
            </iframe, <iframe, </iframe>,
            </img, <img, </img>,
            </input, <input, </input>,
            </ins, <ins, </ins>,
            </kbd, <kbd, </kbd>,
            </keygen, <keygen, </keygen>,
            </label, <label, </label>,
            </legend, <legend, </legend>,
            </li, <li, </li>,
            </link, <link, </link>,
            </main, <main, </main>,
            </map, <map, </map>,
            </mark, <mark, </mark>,
            </math, <math, </math>,
            </menu, <menu, </menu>,
            </menuitem, <menuitem, </menuitem>,
            </meta, <meta, </meta>,
            </meter, <meter, </meter>,
            </nav, <nav, </nav>,
            </noscript, <noscript, </noscript>,
            </object, <object, </object>,
            </ol, <ol, </ol>,
            </optgroup, <optgroup, </optgroup>,
            </option, <option, </option>,
            </output, <output, </output>,
            </p, <p, </p>,
            </param, <param, </param>,
            </pre, <pre, </pre>,
            </progress, <progress, </progress>,
            </q, <q, </q>,
            </rp, <rp, </rp>,
            </rt, <rt, </rt>,
            </ruby, <ruby, </ruby>,
            </s, <s, </s>,
            </samp, <samp, </samp>,
            </script, <script, </script>,
            </section, <section, </section>,
            </select, <select, </select>,
            </small, <small, </small>,
            </source, <source, </source>,
            </span, <span, </span>,
            </strong, <strong, </strong>,
            </style, <style, </style>,
            </summary, <summary, </summary>,
            </sup, <sup, </sup>,
            </svg, <svg, </svg>,
            </table, <table, </table>,
            </tbody, <tbody, </tbody>,
            </td, <td, </td>,
            </template, <template, </template>,
            </textarea, <textarea, </textarea>,
            </tfoot, <tfoot, </tfoot>,
            </th, <th, </th>,
            </thead, <thead, </thead>,
            </time, <time, </time>,
            </title, <title, </title>,
            </tr, <tr, </tr>,
            </track, <track, </track>,
            </u, <u, </u>,
            </ul, <ul, </ul>,
            </var, <var, </var>,
            </video, <video, </video>,
            </wbr, <wbr, </wbr>,
            />, <!
            },  
            ndkeywords={
            % General
            =,
            % HTML attributes
            accept=, accept-charset=, accesskey=, action=, align=, alt=, async=, autocomplete=, autofocus=, autoplay=, autosave=, bgcolor=, border=, buffered=, challenge=, charset=, checked=, cite=, class=, code=, codebase=, color=, cols=, colspan=, content=, contenteditable=, contextmenu=, controls=, coords=, data=, datetime=, default=, defer=, dir=, dirname=, disabled=, download=, draggable=, dropzone=, enctype=, for=, form=, formaction=, headers=, height=, hidden=, high=, href=, hreflang=, http-equiv=, icon=, id=, ismap=, itemprop=, keytype=, kind=, label=, lang=, language=, list=, loop=, low=, manifest=, max=, maxlength=, media=, method=, min=, multiple=, name=, novalidate=, open=, optimum=, pattern=, ping=, placeholder=, poster=, preload=, pubdate=, radiogroup=, readonly=, rel=, required=, reversed=, rows=, rowspan=, sandbox=, scope=, scoped=, seamless=, selected=, shape=, size=, sizes=, span=, spellcheck=, src=, srcdoc=, srclang=, start=, step=, style=, summary=, tabindex=, target=, title=, type=, usemap=, value=, width=, wrap=,
            % CSS properties
            accelerator:,azimuth:,background:,background-attachment:,
            background-color:,background-image:,background-position:,
            background-position-x:,background-position-y:,background-repeat:,
            behavior:,border:,border-bottom:,border-bottom-color:,
            border-bottom-style:,border-bottom-width:,border-collapse:,
            border-color:,border-left:,border-left-color:,border-left-style:,
            border-left-width:,border-right:,border-right-color:,
            border-right-style:,border-right-width:,border-spacing:,
            border-style:,border-top:,border-top-color:,border-top-style:,
            border-top-width:,border-width:,bottom:,caption-side:,clear:,
            clip:,color:,content:,counter-increment:,counter-reset:,cue:,
            cue-after:,cue-before:,cursor:,direction:,display:,elevation:,
            empty-cells:,filter:,float:,font:,font-family:,font-size:,
            font-size-adjust:,font-stretch:,font-style:,font-variant:,
            font-weight:,height:,ime-mode:,include-source:,
            layer-background-color:,layer-background-image:,layout-flow:,
            layout-grid:,layout-grid-char:,layout-grid-char-spacing:,
            layout-grid-line:,layout-grid-mode:,layout-grid-type:,left:,
            letter-spacing:,line-break:,line-height:,list-style:,
            list-style-image:,list-style-position:,list-style-type:,margin:,
            margin-bottom:,margin-left:,margin-right:,margin-top:,
            marker-offset:,marks:,max-height:,max-width:,min-height:,
            min-width:,transition-duration:,transition-property:,
            transition-timing-function:,transform:,
            -moz-transform:,-moz-binding:,-moz-border-radius:,
            -moz-border-radius-topleft:,-moz-border-radius-topright:,
            -moz-border-radius-bottomright:,-moz-border-radius-bottomleft:,
            -moz-border-top-colors:,-moz-border-right-colors:,
            -moz-border-bottom-colors:,-moz-border-left-colors:,-moz-opacity:,
            -moz-outline:,-moz-outline-color:,-moz-outline-style:,
            -moz-outline-width:,-moz-user-focus:,-moz-user-input:,
            -moz-user-modify:,-moz-user-select:,orphans:,outline:,
            outline-color:,outline-style:,outline-width:,overflow:,
            overflow-X:,overflow-Y:,padding:,padding-bottom:,padding-left:,
            padding-right:,padding-top:,page:,page-break-after:,
            page-break-before:,page-break-inside:,pause:,pause-after:,
            pause-before:,pitch:,pitch-range:,play-during:,position:,quotes:,
            -replace:,richness:,right:,ruby-align:,ruby-overhang:,
            ruby-position:,-set-link-source:,size:,speak:,speak-header:,
            speak-numeral:,speak-punctuation:,speech-rate:,stress:,
            scrollbar-arrow-color:,scrollbar-base-color:,
            scrollbar-dark-shadow-color:,scrollbar-face-color:,
            scrollbar-highlight-color:,scrollbar-shadow-color:,
            scrollbar-3d-light-color:,scrollbar-track-color:,table-layout:,
            text-align:,text-align-last:,text-decoration:,text-indent:,
            text-justify:,text-overflow:,text-shadow:,text-transform:,
            text-autospace:,text-kashida-space:,text-underline-position:,top:,
            unicode-bidi:,-use-link-source:,vertical-align:,visibility:,
            voice-family:,volume:,white-space:,widows:,width:,word-break:,
            word-spacing:,word-wrap:,writing-mode:,z-index:,zoom:
            },  
            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,
        alsodigit={.:;},
        tabsize=2,
        showtabs=false,
        showspaces=false,
        showstringspaces=false,
        extendedchars=true,
        breaklines=true,        
    }
    \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}

enter image description here

6
  • 2
    Good answer and welcome to tex.se! Do you have an idea what causes the strange indentation of the first lines?
    – Daniel
    Commented Jul 2, 2014 at 8:36
  • I am pleased to see that the work on that listing goes on. Great! Keep it up! We also have to find a way to do proper highlighting for HTML Comments because at the moment the beginning and ending is colored but not the rest which looks a bit weird. Anyway. Good work!!
    – Benny Code
    Commented Jul 17, 2014 at 9:22
  • why after the fourth row left edge is different?
    – Edy Jo
    Commented May 5, 2015 at 7:48
  • Is there a way to make everything after : but before ; in a different color than black?
    – kexxcream
    Commented Mar 31, 2017 at 19:31
  • There's another good example of HTML formatting at github.com/PKief/latex-thesis-template/blob/master/settings/… . It doesn't seem to suffer from the indentation issue. I imagine it's some difference in configuration and probably the ultimate solution would merge both. Commented Aug 21, 2022 at 12:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .