4

Problem statement

I have several code listings containing HTML markup in my latex files. These listings contain multiple custom html tags (created in combination with corresponding AngularJS directives).

Such an HTML fragment could look for example like this:

<list-component data="angularDataObject"
    list-type="dataActor">
</list-component>
<div id="test"></div>

Originating from a CamelCase name of a directive listComponent in JavaScript, a dash is added in between resulting in list-component to maintain code readability.

I tried using both and for syntax highlighting:

listings

Using I achieved the following result:

\documentclass{article}
\usepackage{listings}
\begin{document}
\begin{lstlisting}[language=HTML]
<list-component data="angularDataObject"
    list-type="dataActor">
</list-component>
<div id="test"></div>
\end{lstlisting}
\end{document}

listings result

As you can see, the tag name is not identified, neither the custom attribute list-type. I think the word type is recognized as standard html attribute and therefore highlighted.

minted

Using I achieved the following result:

\documentclass{article}
\usepackage{minted}
\usemintedstyle{borland}
\begin{document}
\begin{minted}{html}
<list-component data="angularDataObject"
    list-type="dataActor">
</list-component>
<div id="test"></div>
\end{minted}
\end{document}

minted result

The minted result is even worse, as the word list is highlighted before the dash - component by contrast isn't, even though list is not an HTML standard tag. Attributes look fine this time, but the closing tag is not identified at all and gets an ugly background behind the opening bracket <.

My goal

I search for a plugin that is able to automaticly detect and highlight custom tags, without needing to add them each by each - since I might be unsure which tags I'll use in the future. Further it would be great to identify custom attributes, but I could go without that, if attributes are not highlighted at all. Finally it is essential that closing tags are at least highlighted the same way as the opening ones were highlighted before.

Thanks in advance for your generous help and advices!

By the way, while typing this question and adding language data for different code highlighting I discovered that Google Code prettifier is analyzing and displaying my code perfectly :-/

Other related TEX.SE questions

\listings code style for HTML5 (CSS, HTML, JavaScript) In this solution any tags must be noted in the settings in order to be identified.

How to highlight own keywords in HTML lstlistings? This solution allows individual highlighting of code parts, but changes need to be hard-coded into the listing. This ruins readability in the TEX markup.

How to use angle brackets for a keyword in \listings? This solution reuires once again that all tags are defined a priori.

  • could you provide an MWE to simplify testing? that said, the listings package does allow for additional, manually specified, keywords.. see section 3 of the documentation – greyshade Aug 8 '14 at 8:26
  • @greyshade I updated both latex lsitings to form MWEs - sorry I missed documentclass and document-begin/-end before. The minted example is not totaly minimal, as the style definition is not needed, but as I already used borland for the screenshot, I would stick with that. The HTML markup contains all required items and for comparison a standrad div-tag with an attribute. Your suggested solution, by adding tags to listingsis already covered within two of the three referenced questions and is not exactly what I try to achieve. Nonetheless thanks for your idea! =) – Daniel Aug 8 '14 at 9:41
  • 1
    This should definitely work in minted; there seems to be a bug in Pygments, which is used internally by minted – you should submit a bug report there. – Konrad Rudolph Aug 8 '14 at 9:54
4

Ok, after some thinking about how to do this with listings while avoiding manually specifying keywords, I suppose a syntax based solution may work.

I.e. I defined a language for listings using moredelim and morestring to handle the most basic syntax of XML and get the following results: enter image description here

the corresponding code is:

\documentclass{report}

\usepackage{listings}
\usepackage{color}

\lstdefinelanguage{XML_SYNTAX}{%
    alsoletter=-,
    morestring=[b]",stringstyle=\color[rgb]{0,0,1},
    moredelim=*[s][{\color[rgb]{0.75,0,0}}]{<}{>},
    moredelim=[s][{\color[rgb]{0,0,0}}]{<!--}{-->},
    moredelim=[s][{\color[rgb]{0,0.75,0}}]{\ }{=},
    moredelim=[s][{\color[rgb]{0,0.75,0}}]{\    }{=} % here there is \tab
}

\lstset{
    % Basic design
    backgroundcolor=\color[rgb]{0.9,0.9,0.9},
    basicstyle={\small\ttfamily},
    breaklines=true,
    frame=l,
    tabsize=2,
    % Line numbers
    xleftmargin={0.75cm},
    numbers=left,
    stepnumber=1,
    firstnumber=1,
    numberfirstline=true,
    % HTML formatting
    language=XML_SYNTAX,
}

\begin{document}
\begin{lstlisting}
<!-- with tab -->
<list-component data="angularDataObject"
    list-type="dataActor">
</list-component>
<!-- with space -->
<list-component data="angularDataObject"
  list-type="dataActor">
</list-component>
<!-- some other tag -->
<div id="test"></div>
\end{lstlisting}
\end{document}

For explanation of what the the code does, refer to sections 3.2, 3.3 and 4.18 onwards of the listings documentation.

Note: for some reason the list-type attribute is still wrong, although I told listings to treat - as a letter with alsoletter={-} - maybe you can figure out why that is, otherwise I'll have some time for more testing in a few hours.

This was due to my usage of a tab for indentation, rather than a space. As that is fixed now, more debugging to do, since the closing > of the list-component tag has now become green as well..

Thanks to @Jubobs this is fixed as well - it was my bad to have an extra * in the attribute style line. In addition I fixed things to that indentation with tabs also works.

  • 1
    Remove the star in the last moredelim; then the closing > will be in the correct colour. – jub0bs Aug 8 '14 at 10:45
  • Great solution, I didn't even think of considering xml. That happens if you rush into a problem, instead of stepping back and seeing (the more or less simple solution) Thanks! – Daniel Aug 11 '14 at 0:28
  • How come if a line gets intended the element turns green? – kojow7 Aug 16 '17 at 21:29
  • @kojow7 this may be to do with having \tab and \space as a delimiter in the last two rows of the \lstdefinelanguage{XML_SYNTAX} - to really figure what's happening, you might need to be more specific though: can you give an example where it leads to incorrect highlighting? – greyshade Aug 17 '17 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.