Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I recreate the medium highlight function? [closed]

I couldn't work out - or find any resources, on how to create the highlighting thing they do on medium.com

To clarify:

When you highlight a selection of words in an article, a little tooltip pops up with the option to tweet or comment on the selection of words you highlighted.

Here's a screenshot: Medium's highlight function

I have absolutely no idea how to achieve this - so I don't have any code to provide (and I can't work it out from the medium.com source)

If you have any idea on how to do this - please share

Thanks, Tom

like image 759
TomHill Avatar asked May 30 '14 10:05

TomHill


People also ask

How do I undo highlighting in medium?

You can remove a highlight by clicking the down arrow button near the highlight you want to remove and choosing Unhighlight.

How do you highlight in medium?

Medium's Highlights feature is deceptively simple. With a single swipe and click, you can select a word, phrase, or passage in any Medium post. A tooltip menu appears over the highlighted text — clicking the highlighter icon marks the passage as a Highlight. An example highlight in Medium.

How do I get rid of highlights on my phone?

Open your story highlight and find the photo or video you want to remove. Tap More (iPhone) or More (Android) in the bottom right of the photo or video. Tap Remove from Highlight, then tap Remove (iPhone) or Remove Photo (Android) or tap Edit Highlight to add more photos or videos to your story.

How do you highlight text in HTML CSS?

How Do I Highlight Text In CSS? To Highlight text in HTML you have to use an inline element such as the <span> element and apply a specific background style on it. This will create the highlighting effect, which you can tweak in many different ways to create different looks.


2 Answers

First step is to get the selection of the user. This can be done with window.getSelection().

var getSelectedText = function () {
  var selectedText = '';

  if (window.getSelection()) {
    selectedText = window.getSelection();
  } else if (document.getSelection()) {
    selectedText = document.getSelection();
  } else if (document.selection) {
    selectedText = document.selection.createRange().text;
  }

  return selectedText;
};

window.addEventListener('mouseup', function () {
  var result = getSelectedText();

  // Now you can do whatever you want with your selected text 
});

Then you need to create a sticky tooltip on the position of this selection (you can find this by getting the element.offsetLeft, element.offsetTop of your element). Then you need to hook in a commenting system that stores the relationship to the selection (by wrapping the selection with a span and an ID for example and open up the editor.

This is only the basic introduction for what you asked, it’s slightly more complex but also depends on what you exactly want to do with it.

Hope it helps!

like image 144
helloanselm Avatar answered Oct 12 '22 13:10

helloanselm


Try looking at Highlighter.js on github. It's similar to what's happening on Medium.com blog but requires a bit of work in order to achieve what you want.

like image 44
Liam Avatar answered Oct 12 '22 13:10

Liam