Text highlighting plugin

plugin-idea

#1

Hello,

my goal is to develop a plugin that adds text highlighting to the formatting options in Inkdrop. GitHub Flavored Markdown (GFM) already covers most of the formatting options I personally require for note taking. However having used Evernote in the past I really miss the ability to highlight text to mark relevant portions in my notes. Strong and emphasis does not quite cut it for me.

Semantically speaking marking text in that manner also conveys a different meaning as the MDN web docs nicely point out:

Don’t confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance.

The docs further state that it is mainly used in conjunction with <blockquote> to indicate text that is of special interest to the reader. As people often copy text from the web into their notes and like to annotate it, you can make the case that GFM is lacking in its syntax to adequately support this use case with respect to note taking.

Semantics aside, I have to admit that it is also just nice to have another styling option besides bold and italics and this is where the problem begins. Markdown is so popular because of its simplicity and you do not want to pollute the syntax carelessly. Extending it also breaks compatibility with other Markdown parsers when exporting notes. This is unless you have other people adopt the extension as well.

Inkdrop uses remark for its Markdown processing which already provides a rich ecosystem of plugins, some of which are extensions to Markdown. Text highlighting is not among them, but submitting it as a new plugin could help standardize this feature.

I already have a working prototype running in Inkdrop, but before I consider publishing it as a plugin to the public, I would like to hear from the community what are your general thoughts regarding text highlighting.

As a preliminary punctuation character for the new syntax I have chosen !!, so that the following text

> The !!Total Perspective Vortex!! derives its picture of the whole Universe on the principle of extrapolated matter analyses. […]

renders to:

Best regards!


#2

Thank you for sharing your idea.

I personally often copy text from kindle books and highlight important sentences on Evernote.
So your plugin would be useful to do that on inkdrop!


[plugin-dev] Extending Markdown syntax
#3

Thanks for sharing! I’ve been looking for something like this. I read books in Markdown sometimes, and it would be great to be able to highlight sections for reference later.


#4

It will be available once the rendering part is supported by Inkdrop.

In the meantime I found several sources that are trying to add text highlighting capabilities to Markdown. They all favor a different syntax, == instead of !!, so the plugin will use the former syntax for the sake of interoperability.


#5

are you building this out hoopy frood?

I would prefer the == syntax since !! sometimes gets confused with images.

I think you should follow how the https://stackedit.io/app# app handles highlighting

Example below

It should also have a binding key like when you press CTRL+B it automatically gives you ****. Instead have it binded on either

  1. CTRL+H
  2. CTRL+SHIFT+H

to trigger ==== or around whatever is selected


#6

The plugin has just been released. To install type:

ipm install highlight-text

I hope you will find it useful. Let me know if you encounter any issues.

Greetings, Hoopy


#7

Keymapping is supported but not active by default. I have noticed there is an active native mapping for CTRL-H, but I could not figure out what it is good for. So use with caution. Also make sure not to have multiple body entries in your keymap.cson file, otherwise Inkdrop might refuse to start. :sweat_smile:


#8

Thanks for your hard work, @Hoopy_Frood! I’ll install it and give it a go tonight. Can’t wait :grin:


#9

I already have some ideas for the next release.

  1. Support text highlighting in the editor (left pane)
  2. Integration with the toolbar
    image

If any of you know how to accomplish 1. with CodeMirror, your help is greatly appreciated!


#10

It works great! Thanks, again :slight_smile:


#11

@Hoopy_Frood, I think I found a bug with the highlighting text plugin while working in Inkdrop today:

The plugin is seeing the double-equals operator in the backticks as the end of the highlight.


#12

Thanks for the report. At the moment the plugin uses the remark-mark package from npm for parsing. I also came up with a different implementation more aligned with existing remark plugins. Both of them fail with your example.

The same problem occurs if you use ** instead of ==. This means the core parser for strong text cannot handle this use case. Therefore I am afraid it is too difficult to fix at the moment.


#13

No worries. I modified the way I wrote my note. In the vast majority of my use-cases, the highlight-text plugin works great. This was just a weird one :thinking: