CSS Strikethrough workaround

Plugins and Custom CSS CSS
#1

[1st] Add Custom CSS

[data-rem-tags~="strikethrough"] .rem-text .highlight-color--red {
	background-color: unset;
	color: ;
	border-bottom: ;
	text-decoration:line-through;
	text-decoration-style: double;
}

set color whatever you want.
In my case I sacrifice red highlight for the sake of Strikethrough

[2nd] Make custom tag : strikethrough

[3rd] Highlight text you want to strikethrough

CleanShot 2021-06-04 at 00.53.25
CleanShot 2021-06-04 at 00.53.251035×312 29.2 KB

the sequence is no meaning.

If there are something to fix, please let me know

Cheers!
unnamed

9 Likes
#2

Скриншот 25-07-2021 135448
Скриншот 25-07-2021 1354481094×515 62.9 KB

It’s a little complicated and inconvenient. I never managed to implement it. It would be great if the developers implemented this option by default.

#3

Yup, It’s just a workaround. I requested it a long time ago. but I think the strikethrough option has low priority, so it will take a long time to be implemented.
But, hey! Highlight the text you typed to the red color. You might miss just a minor procedure.

1 Like
#4

Browneyedsoul, thank you very much for the hint! Everything worked out.

Скриншот 26-07-2021 214507
Скриншот 26-07-2021 2145071057×357 51.9 KB

Yes, besides highlighting the text to the red color. it is necessary to uncheck the “Snippet”.

1 Like
#5

I delete [data-rem-tags~="strikethrough"] from CSS code. So I don’t have to add extra tag, just highlight the text. :grinning:

#6

Hey, @Sky that’s not the right use case. :slightly_smiling_face:
if you delete the data-rem-tags selector, you eliminate all the red highlight color into strikethrough. That’s not ideal for general users.

Please check here for latest update

1 Like
#8

That’s true. :smiley:
I deleted it because I thought I would never use the purple highlight color.

2 Likes
#9

Modified the CSS a little (removed .rem-text) to allow a keyboard-only workflow.

image
image815×576 43.5 KB

Pasted Rems below so you can copy paste easily :

  • Strikethrough
    • test test test
      • red highlight on selection (select text > mouse > red highlight)
      • tag
    • test test test
      • red highlight on rem (select rem > “red” or “clear”) (keyboard-only)
      • tag
    • test test test
      • red highlight on selection and entire rem
        • rem overrides text of course
      • tag
    • [data-rem-tags~=“strikethrough”] .highlight-color–red {
      background-color: unset;
      color: ;
      border-bottom: ;
      text-decoration:line-through;
      text-decoration-style: double;
      }
2 Likes