Giter VIP home page Giter VIP logo

joplin-plugin-simple-highlighter's Introduction

Overview

Simple highlighter to highlight the selected text by wrapping == around the selected text. Able to dehighlight the word using same button / command.

Remark

  • Highlight style follows the markdown stylesheet. To customise the style, go to Tools → Options → Appearance → Show Advanced Settings → Custom stylesheet for rendered Markdown
    mark {
        /* Sample style. Sets the background and font colour of user highlighted text (==mark==) */
        background-color: red;
        color: white;
    }
  • Please select all highlighted text to dehighlight properly. Selecting the == is optional. Refer to the GIF above

Discuss the plugin with other Joplin users

You can discuss this plugin on the Joplin forum Simple Highlighter plugin thread.

joplin-plugin-simple-highlighter's People

Contributors

ei8fdb avatar kensam94 avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

joplin-plugin-simple-highlighter's Issues

[Bug] Removal of Highlight with cursor behind selection not working correctly

When the cursor (|) is behing a highlighted selection like so:
Test of a ==highlighted selection==|
and the highlight button is clicked the last two equal signs are removed. This removes the highlight but leaves the starting equal signs incorrectly. I guess this feature is by design.

Current Behaviour

If we have the following line with | indicating the cursor position:
Test of a ==highlighted selection==|
clicking the highlight button results in:
Test of a ==highlighted selection|

Expected Behaviour

If we have the following line with | indicating the cursor position:
Test of a ==highlighted selection==|
clicking the highlight button results in:
Test of a highlighted selection|

[Feature] Highlight complete row if nothing is selected

I like your plugin a lot!
To simplify highlighting even more I would like to highlight a complete row by simply clicking once.

Current Behaviour

If we have the following line with | indicating the cursor position:
Test of a |sentence
clicking the highlight button results in:
Test of a ====|sentence

Expected Behaviour

If we have the following line with | indicating the cursor position:
- Test of a |bullet point
clicking the highlight button should result in:
==Test of a |sentence==

How to

In order to implement this we would probably do sth along the following lines:
Adding highlight:

  1. check for an empty selection
  2. if empty:
  3. (save the cursor position)
  4. select the complete line
  5. do highlight as implemented
  6. (unselect and position cursor at original cursor position +2)

Removing highlight:
In order to remove the highlight correctly, the equal signs must can be part of the selection, so it's nearly the same as adding highlight:

  1. check for an empty selection
  2. if empty:
  3. (save the cursor position)
  4. select the complete line
  5. do removal of highlight as implemented
  6. (unselect and position cursor at original cursor position -2)

To prevent the breaking of markdown syntax highlight == must be positioned behind the #, - etc. of headings, bullet points etc.
To do so it should be enough to start the selection at the first letter of the line for adding of highlight or at the first equal sign for removal of highlight:
- Test of a |bullet point
clicking the highlight button should result in:
- ==Test of a |bullet point==
clicking the highlight button again results in:
- Test of a |bullet point

[Feature] Removal of "nested" highlight

When we select a highlighted section like so (start and end of selection indicated with (|)):
|Test of a ==highlighted selection== and more|
and the highlight button is clicked I would expext to expand the highlighted section. Two more equal signs are added around the selection but the "nested" highlight equal signs are not removed. This breaks the highlight markdown.

Current Behaviour

When we select a highlighted section like so (start and end of selection indicated with (|)):
|Test of a ==highlighted selection== and more|
clicking the highlight button results in:
==Test of a ==highlighted selection== and more==|

Expected Behaviour

When we select a highlighted section like so (start and end of selection indicated with (|)):
|Test of a ==highlighted selection== and more|
clicking the highlight button should result in:
==Test of a highlighted selection and more==|
or as an intermediate step should remove all equal signs that are in pair of two inside of the selection:
Test of a highlighted selection and more|

How To

  1. count equal signs in pair of two in selection (e.g.: with regex ={2}\b|\b={2})
  2. if (count > 0): remove all pair of two in selection
  3. do highlight as implemented

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.