In HTML, if you want to render a block of code, respecting white-space, but without any hyperlinking or other HTML, it’s easy; just use code. Secondly, if you want to have hyperlinks within your code then there are several options, including placing each line within a li of a list. Thirdly, if you want to render it with intelligent syntax highlighting, there are syntax highlighters from Google and others. But what if you want to combine the first two? Have a code block that respects white-space like indents and line-breaks but also includes HTML? Here we look at one solution.

CSS

div.code-linkable {
  background-color: #f7f7f7;
  border-radius: 4px;
  color: #44443c;
}
.code-linkable > ol {
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
  list-style-type: none;
  padding: 7px;
  text-shadow: none;
}
.code-linkable > ol > li {
  white-space: pre-wrap;
}

HTML

<div class="code-linkable">
  <ol>
    <li>SELECT</li>
    <li>  iOrderId</li>
    <li>FROM</pre>
    <li>  <a href="/schema_browser?schema=Orders&table=tOrder">
        Orders.tOrder</a>
    <li>WHERE</li>
    <li>  fGross &gt; 100.00</li>
  </ol>
</div>

As you can see with the greater-than symbol, a disadvantage is that everything ambiguous must be html-ified. If you want a distinct background colour for the code block, do that in a wrapping div since list items have varying lengths (widths).

Advertisements