Adding line numbers and syntax highlighting to code samples in HTML5 output

Greetings RoboHelp and HTML experts!

Does anyone have a good way to add line numbers to code examples in RoboHelp output? Outside RoboHelp, I've used CSS styles (<pre> and <code>), but you have to apply the <code> tags to every line -- a pain, especially when you have to update code samples -- and I haven't gotten it to work in RoboHelp. When I attempted to add the tags to topics in the HTML view, RoboHelp added dozens and dozens of extra <code> and </code> tags when I switched back to Design view. It made a real mess. Anyone know why?

I'm also looking for a way to highlight syntax in code samples. Any suggestions?

My current configuration:

Windows 7, TechComm Suite 2015

FrameMaker source, RoboHelp project for Multiscreen HTML5 generation

Here's the CSS I tried (worked outside of Robohelp):

pre {

  counter-reset: line;

  display: block;

    white-space: pre;

    margin: 1em 0;

  font-family: "Courier New";

  font-size: 10pt;

  background-color: #ededed;

  margin-right: 5pt;

  margin-left: 5pt;

  margin-top: 5pt;

  margin-bottom: 5pt;

}

code {

    counter-increment: line;

}

code:before{

    content: counter(line);

  font-family: "Courier New";

  color: gray;

  padding-right: 10pt;

  -webkit-user-select: none;

}

Thank you!

-Kate