[Request]: Highlight pre- and post-context

[jez]

Feature Request Checklist

• I have searched the existing issues to avoid duplicates

What feature would you like to request?

What I'd really like is some way to take input like this:

highlight = the thing I highlighted
contextualText = Something before the thing I highlighted, and then something after

and produce this:

🎯 Highlight:: Something before the thing I highlighted, and then something after.

One way I can think to achieve this would be if there were a Handlebars helper function to get the contextual text before and after the highlighted text (or, to have two additional template variables, contextualTextPre and contextualTextPost, which achieve the same thing).

If there's already a way to achieve this with functionality built into this plugin or Handlebars itself, I'd love to learn about it.

Code of Conduct

• I agree to follow this project's Code of Conduct

[bandantonio]

Hi @jez
Thank you for the request and time to make a PR.

Did I understand you correctly that your idea is to basically highlight the highlighted portion within the contextualText?
I believe we can do this a bit more easier by introducing just one helper (instead of two) that would output the result with the expected formatting. Something like this:

{{highlightWithinContext highlight contextualText}}

The helper function would look like this:

Handlebars.registerHelper('highlightWithinContext', (highlight: string, contextualText: string) => {
  // there must always be a highlight within the contextual text
  // so it is possible to wrap that portion with <mark> tag and return it
  const highlightWithinContext = contextualText.replace(highlight, `<mark>${highlight}</mark>`);
  
  return highlightWithinContext;
});

I should also mention that the contextualText already includes "something" before and after. But since it is automatically scoped to the nearest sentence(s) only, in some cases, the highlight will match the contextualText, so there wouldn't be any text surrounding the highlight. This behavior is described in the documentation.

[jez]

@bandantonio The difference between the solution you propose and the one I propose is that in mine, the choice of mark is configurable.

Continuing with your solution, it would be possible to accept markStart and markEnd arguments to highlightWithinContext, possibly defaulting to <mark> / </mark>. But for example, maybe you want to mark the text with <strong> / </strong> instead, or some other custom markup.

I should also mention that the contextualText already includes "something" before and after. But since it is automatically scoped to the nearest sentence(s) only, in some cases, the highlight will match the contextualText, so there wouldn't be any text surrounding the highlight. This behavior is described in the documentation.

Yep, understood, that's fine. I'm personally just trying to recreate this effect from the Books app:

So if the highlight and contextualText are the same, it's fine for the way it gets formatted to just have the whole thing wrapped in begin/end markers.

[jez]

I have no strong opinion about either solution (one helper or two) in so far as it supports choosing what to use for the begin and end marker.

[bandantonio]

@jez Thanks for the explanation, now this makes more sense.
As for the markers, for the first iteration, I would introduce a list of allowed tags (for example, b/strong, i/em, mark, pre) as common ones for text formatting.

[jez]

Thanks but I’m really hoping for arbitrary markers.

My intention is to use markup like

<span style="color: red;">red</span>

with custom inline CSS to recreate the highlights with the same colors as used by the Books app. There is even an example of doing so in the documentation, except it doesn’t support showing the contextual text before and after the highlight:

https://mister-gold.pro/obsidian-apple-books-highlights-plugin/customization/templates-and-variables.html#custom-templates

There’s also the question of how some people might want to use markdown markers (**) instead of HTML tags.

In my opinion, it’s not sufficient to artificially restrict the markers.

[vsheg]

This looks exactly like what I need. Thank you. Please add also an option to increase the context: +2 sentences at each side, +100 words at each side, the whole paragraph, etc.

Books.app also supports different colors and underlining. Hope this will be supported too!