Fix the Marker Position in Some Code Snippets

[picnoir]

We have a problem when adding the line marker in the code snippets from our HTML Renderer. They are sometimes misplaced.

TBH, this feature has been added in a rush, there's some technical debt here.

1. Refactor out the whole highLightOccs function from ProcessingSteps.hs to the Renderer/Html.hs file, it shouldn't be here in the first place.
2. Re-think the API of the whole highlighting process to allow us to unit test this feature.
3. Write some unit tests showing the current algorithm failing.
4. Fix everything.

[picnoir]

For instance, https://exhack.org/packages/%42%6F%6F%6C%65%61%6E/%44%61%74%61%2D%42%6F%6F%6C%65%61%6E/#hidemaxB

[picnoir]

Loosely related small enhancements we probably could do while fixing this:

I find it pretty hard to find the ascii markers at a glance, though, mostly because they are indented. Would it be possible to mark that line with a colored bar on the left or something?

https://www.reddit.com/r/haskell/comments/9xax6d/exhack_a_haskell_examplebased_documentation_alpha/e9rvvju/

 add an <a name="#unique_id"/> before each example and a link near the location that point to that anchor. This way people can communicate more easily the example then they need to.

@Shamar