[RESOLVED] Code Tag Removes New Lines

[dday9]

So I'm trying to use the <code> tag but for whatever reason it keeps removing new line characters. This is my markup:

<code><span class="code-blue">Dim</span> firstName <span class="code-blue">As String</span> = <span class="code-red">"David"</span>
<span class="code-blue">Dim</span> age <span class="code-blue">As Integer</span> = 101 <span class="code-green">'At least I feel this old some times!</span>
<span class="code-blue">Dim</span> height <span class="code-blue">As Double</span> = 70.5 <span class="code-green">'Represented in inches</span></code>

And this is my CSS:

code {
  border: 1px solid #666;
  display: flex;
  font-family: monaco,Consolas,Lucida Console,monospace;
  font-size: 15px;
  min-height: 5em;
  white-space: pre;
  width: 100%;
  word-break: normal;
  word-wrap: normal;
}

.code-blue {
  color: #0000ff;
}

.code-red {
  color: #ff0000;
}

.code-cyan {
  color: #00FFFF;
}

.code-green {
  color: #00A550;
}

Any reason why it would be doing that? Also, do y'all know of a way that the syntax highlighting can be done automatically? I'm getting really tired of creating all those <span> elements.

[tr333]

HTML strips all excess whitespace, so newlines will be ignored. The HTML5 spec mentions wrapping the <code></code> tags in <pre></pre> tags to preserve the whitespace.

[tr333]

https://github.com/syntaxhighlighter/syntaxhighlighter
http://prismjs.com/
https://highlightjs.org/

[dday9]

Awesome! The syntaxhighlighter one worked best and had a VB.Net brush too, so I went in that direction.