Feature request: Text Color mode and Minimal menu

[KraXen72]

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:

text color mode

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

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]

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]

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]

i am completely new so i only replaced the data.json

never used css

will try thx

On Sun, 8 Jan 2023, 04:49 KraXen72, @.***> wrote:

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.

— Reply to this email directly, view it on GitHub https://github.com/chetachiezikeuzor/Highlightr-Plugin/issues/61#issuecomment-1374607568, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI6PKYI3KZHWP5ZWK43BLN3WRHJEZANCNFSM6AAAAAATEZYWJI . You are receiving this because you commented.Message ID: @.***>

[ccchan234]

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]

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]

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]

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

[mariomui]

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:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

[florenciagithub]

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 !

[boyoungzheng]

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]

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

[boyoungzheng]

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

[KraXen72]

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!