chetachiezikeuzor/Highlightr-Plugin

Feature request: Text Color mode and Minimal menu

KraXen72 opened this issue · 13 comments

KraXen72 commented

This issue is two feature requests, both should be added as a new setting into the plugin.

minimal menu:

change the highlighter menu to this minimal variant:
image

text color mode

makes it so that highlights don't change text background color, but actual text's color:
image

i have implemented both as a css snippet, feel free to use the code there to implement these features, but please do atleast mention my github username in the changelog if you decide to use my code.

/* data.json for highlightr plugin */
/* replce your highlightr config located in: [vault]\.obsidian\plugins\highlightr-plugin\data.json */
/* {"highlighterStyle":"rounded","highlighterMethods":"css-classes","highlighters":{"r":"#bf616a","g":"#a3be8c","p":"#b48ead","b":"#81a1c1","aa":"#a5756233","o":"#d08770"},"highlighterOrder":["aa","r","g","b","p","o"]} */

/* restyle the vanilla highlight to rosebox color */
.markdown-preview-view,
.cm-s-obsidian span.cm-formatting-highlight, 
.cm-s-obsidian span.cm-highlight  { --text-highlight-bg: #a5756233; }

.theme-dark .markdown-preview-view mark,
.markdown-preview-view mark,
:is(.markdown-preview-view, .markdown-rendered) mark, 
.cm-s-obsidian span.cm-highlight { 
	background: #a5756233; 
	color: var(--text-normal);
}

/* remove border radius from normal highlight */
.highlightr-rounded span.cm-highlight:not(.hltr-aa) {
    border-radius: 0px !important;
}

/* instead of background, change text color for defined highlights */
mark.hltr-r,
mark.hltr-g,
mark.hltr-b,
mark.hltr-p,
mark.hltr-o
{
    background: transparent !important;
    background-color: transparent !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
/* taken from nord pallete colors */
mark.hltr-r { color: #bf616a !important }
mark.hltr-g { color: #a3be8c !important }
mark.hltr-b { color: #81a1c1 !important }
mark.hltr-p { color: #b48ead !important }
mark.hltr-o { color: #d08770 !important }
mark.hltr-aa { color: var(--text-normal) }

/* highlightr compact menu */
.menu.highlighterContainer {
    display: flex !important;
    width: max-content !important;
    padding: .2rem .5rem !important;
    overflow-x: none !important;
}
.menu.highlighterContainer .menu-item {
   padding: 0;
   margin: 0;
   border-bottom: transparent;
   border-radius: 5px;
   
   justify-content: center;
   align-items: center;

   aspect-ratio: 1/1;

}
.menu.highlighterContainer .menu-item .menu-item-title {
	display: none;
}
.menu.highlighterContainer .menu-item .menu-item-icon {
	height: min-content;
	width: min-content;
}

/* consistent icon stroke width with others */
.highlightr-eraser svg path, .highlightr-pen svg path {
    stroke-width: .3px !important;
}
ccchan234 commented

hi, i replaced that data.json /w the above code,
but nothing happens.

i am already on latest obsidian and highlightr plugin,
anything i may missed? thanks

KraXen72 commented

did you also apply this css snippet?
the data.json should only be what is in the first line, the minifed json. this:

{"highlighterStyle":"rounded","highlighterMethods":"css-classes","highlighters":{"r":"#bf616a","g":"#a3be8c","p":"#b48ead","b":"#81a1c1","aa":"#a5756233","o":"#d08770"},"highlighterOrder":["aa","r","g","b","p","o"]}

as for the rest, create a new snippet in vault/.obsidian/snippets, for example highlightclean.css, and paste all of the code in my first message in. Then go into obsidian > settings > appearance > refresh the snippets > turn on highlightclean.css.

ccchan234 commented
ccchan234 commented

did you also apply this css snippet? the data.json should only be what is in the first line, the minifed json. this:

{"highlighterStyle":"rounded","highlighterMethods":"css-classes","highlighters":{"r":"#bf616a","g":"#a3be8c","p":"#b48ead","b":"#81a1c1","aa":"#a5756233","o":"#d08770"},"highlighterOrder":["aa","r","g","b","p","o"]}

as for the rest, create a new snippet in vault/.obsidian/snippets, for example highlightclean.css, and paste all of the code in my first message in. Then go into obsidian > settings > appearance > refresh the snippets > turn on highlightclean.css.

hey thx your reply and help, yet i found that highlightr somehow don't work well the way i think.

finally i use the theme "minimal" /w it's plugin "style settings", to turn all default text as magenta, and highlight color as blue. in this way i can have magneta text + blue background for using green filter to "anki" the things.

i tried using minimal for text, then highlightr for highlight but not working, so i figured out the above way.

thanks for help anyway.

wstZeng09 commented

Thx for sharing code, really saves my life.

I tried to replace the label <mark> in main.js with label <font>, and spend like 3 hrs checking, debugging but seems doesn't work. Really appreciate for your code.

weicun581 commented

thanks for share, i have try the css snippet, but it stll the same(background color), anything else i can do to fix it?

jamie9090 commented

Would love this plugin merged with this one, haha: https://github.com/erincayaz/obsidian-colored-text

mariomui commented

Would love this plugin merged with this one, haha: https://github.com/erincayaz/obsidian-colored-text

the implementation of Highliter plugin uses which is probably a better implementation than colored texts use of span. Should the color class not be available in the environment, the mark element will default to yellow.

text colored with colored text will not fall back.

Related:

florenciagithub commented

I applied the minimal menu snipped and IT WORKED. Yayy! Something I didn't knew I wanted but now I never want to go back. Thank you @KraXen72 !

  • ❤️1
boyoungzheng commented

Somehow, the code does not work for me. All I want is just to replace the text color. Here is my way to do that.
Edit [vault]/.obsidian/plugins/highlightr-plugin/main.js
In the this.eraseHighlight function, replace every "mark" with "font".
In the this.settings.highlighterOrder.forEach function
     replace every "mark" with "font".
     replace "background" with "color".
I'm a newbie to obsidian and coding. I know my method is not perfect at all. Feel free to point out what can make it better.

KraXen72 commented

slightly more destructive, but it will achieve what you want. note that it will break if a highlightr update ever comes out

boyoungzheng commented

Thanks for the reply. I'm now using Editing Toolbar 😂. Thanks for your code, though.

KraXen72 commented

For anyone interested, i've decided to fork/rewrite this plugin and add this functionality.
You can install it via BRAT for now.
https://github.com/KraXen72/obsidian-painter

please, do give me feedback if you decide to test the plugin, here or on discord: kraxen72 and you can ping me in the Obsidian server. Thanks!

  • ❤️1