Show a gap between ranges of lines in search results

[simonw]

https://ripgrep.datasette.io/-/ripgrep?pattern=asgi_s&literal=on&glob=datasette%2F**

This is a bit confusing. There should ideally be visual gaps in the line numbers here to make it easier to spot the different ranges:

[simonw]

Here's what the HTML looks like:

<pre><a class="line-number" href="/-/ripgrep/view/datasette/datasette/app.py#L87">87  </a><span>)
</span></pre>
<pre><a class="line-number" href="/-/ripgrep/view/datasette/datasette/app.py#L88">88  </a><span>from .utils.internal_db import init_internal_db, populate_schema_tables
</span></pre>
<pre><a class="line-number" href="/-/ripgrep/view/datasette/datasette/app.py#L200">200 </a><span>
</span></pre>

From this template:

datasette-ripgrep/datasette_ripgrep/templates/ripgrep.html

Lines 65 to 74 in 577ee2f

	{% for result in results %}
	{% if result.type == "begin" %}
	<h3>{{ fix_path(result.data.path.text) }}</h3>
	<div style="overflow-x: auto">{% set ns.ended = false %}
	{% endif %}
	{% if result.type in ("match", "context") %}
	<pre{% if result.type == "match" %} class="match"{% endif %}><a class="line-number" href="{{ urls.path("/-/ripgrep/view/" + url_quote(fix_path(result.data.path.text))) }}#L{{ result.data.line_number }}">{{ "%-4s" | format(result.data.line_number) }}</a><span>{{ result.data.lines.text }}</span></pre>
	{% endif %}
	{% if result.type == "end" %}{% set ns.ended = true %} </div>{% endif %}
	{% endfor %}

[simonw]

So maybe I need to detect when line of code has a line number that's more than one higher than the previous one and add an extra class, maybe <pre class="line-jump"> which can have some extra margin.

[simonw]

https://ripgrep.datasette.io/-/ripgrep?pattern=asgi_s&literal=on&glob=datasette%2F** now looks like this: