Text highlights
Passages of a text marked like a highlighter pen: a word, a sentence, or everything from one quote to another, each in its own colour. Found by what they say, marked on the server as <mark>s.
Words, sentences and colours
A string is yellow; a Hash takes color:. Case, curly quotes and runs of whitespace don't have to match what's written.
I can’t do Friday after all. I'll pick them up from school at 5 on Saturday instead, and drop them home on Sunday night.
<p class="max-w-prose text-sm leading-relaxed">
<%= text_highlights "I can’t do Friday after all. I'll pick them up from school at 5 on Saturday instead, " \
"and drop them home on Sunday night.", [
"pick them up from school at 5",
{ text: "I can't do friday", color: :red },
{ text: "Sunday", color: :green },
{ text: "Saturday", color: :blue },
{ text: "after all", color: :pink }
] %>
</p>From one quote to another
from: and to: mark everything between them, so a long passage needs only its ends. A later highlight wins where two overlap.
The lease starts on 1 November. Rent is due on the first of each month, paid into the account on the invoice. The bond is four weeks' rent, held by the board until you move out.
<p class="max-w-prose text-sm leading-relaxed">
<%= text_highlights "The lease starts on 1 November. Rent is due on the first of each month, paid into the account " \
"on the invoice. The bond is four weeks' rent, held by the board until you move out.", [
{ from: "Rent is due", to: "the invoice." },
{ text: "four weeks' rent", color: :green }
] %>
</p>Across markup
Given HTML, a highlight can run across a link or from one paragraph into the next; each piece is its own mark.
Thanks for your patience. The new times are on the booking page.
They start from next week, and the old ones stop then too.
<div class="UnmagicProse max-w-prose text-sm">
<%= text_highlights [ { from: "The new times", to: "from next week" }, { text: "booking page", color: :blue } ] do %>
<p>Thanks for your patience. The new times are on the <a href="#">booking page</a>.</p>
<p>They start from next week, and the old ones stop then too.</p>
<% end %>
</div>