Change text color for individual blocks or even words

Questions & Help
1

How do I set the text color for individual blocks? Or even subsets of words? Is that even possible right now?

I don’t want to highlight the text. I want to customize the actual text color itself. Like I want to be able to be able to decide on the fly that <font color="red">this text should be red</font> or for a different line, <font color="#fcb103">this text color should be set by the hex code</font>. That kind of thing.

Am I missing this somewhere? I had found GitHub - DenaroCF/Highlighters-for-Logseq: More highlight colors in Logseq and hoped to tweak it for this purpose, but it’s currently not working at all, even for highlighting, so I definitely can’t tweak it to make it work for text color.

2

Could define and use a macro:

  • In file config.edn, inside :macros {}, add a line like the ones below:
    • :colored-text "[:span {:style \"color: $1\"} $2]"
    • :light-yellow "[:span {:style \"color: #d9d898\"} $1]"
  • Then inside a block, type respectively:
    • {{colored-text <color>, "<text>"}}
      • e.g. {{colored-text #d9d898, "this is a test text, which should be colored"}}
    • {{light-yellow "<text>"}}
      • e.g. {{light-yellow "this is a test text, which should be colored"}}
1 Like
3

This is amazing! Thanks so much!

Edit: The only problem is that it stops working if I have to type a comma anywhere in the text. I tried putting the text in quotation marks, and that allows it to continue past the comma, but I don’t particularly want the quotation marks to show up.

How can I work around that issue, @mentaloid ?

5

Definitely! I decided to pre-set a few colors I was going to use consistently, so in the config.edn, I have one line:

:light-yellow "<span style='color: #d9d898'>$1</span>"

In the block, if I type:

{{light-yellow Here's some text, and this is the example.}}

all that shows up is:

Here's some text

(granted, it does show in the correct color!)

If I type:

{{light-yellow "Here's some text, and this is the example."}}

what shows up is:

"Here's some text, and this is the example."

What I actually want to show up is:

Here's some text, and this is the example.

1 Like
6

Just tried this edit after typing out the example, and it looks like it’s fixed it! Thanks again!

Edit: Err, actually, this one works unless I want the text to contain quotation marks. I can get by with using single ones, I guess, but if I want to include quotation marks, it doesn’t process it as a macro.

I also have to put the whole text in quotation marks this way, or it removes all the…spaces? I don’t know what’s going on @mentaloid :sweat_smile:

7

Double quotes inside the text (but not the pair that surrounds the whole text) should be escaped with backslash, i.e. to type \" instead of "

8

But now also the entire thing needs to be written in quotation marks? So, for example, in my block, I have to type:
{{light-yellow "Here is the text."}} instead of {{light-yellow Here is the text.}} like I was doing before?

9

For anything more than a word, double quotes are necessary.

10

I can’t tag things within the required quotes, though. It doesn’t process them as block links. I can’t make words italic or bold, either.

Is there a way to go back to the original solution and just fix the comma thing? That was working a lot better, with that one really significant exception. Is there some other way to escape the comma? The forward slash doesn’t work to do it, but is there some other way? (If there’s some resource where I can read about the type of syntax that does or doesn’t work in these contexts, I’m happy to do some reading on it. I’m just completely unfamiliar with the implementation of “macros” here.)

11

Multiple macros or even the same macro can be applied multiple times for different parts of a block. Leave the special parts outside the macros (e.g. for tags) or even define their own macros (e.g. for colored text that is also italic and/or bold). If you have a specific example, could provide specific code.

12

Basically I want a block to function totally like it normally does, just with the text in something other than the default color.

I want to be able to write a paragraph like:

Today I went out for a walk. I ran into my friend and he was telling me about this “novel” idea he had invented, but it was just peanut butter and jelly sandwiches. Can you believe that? [[Joe]] is such a doofus.

But have it in, say, blue. Or red. Or yellow. I want the commas to render and the quotation marks to render and the italics to render and the block link to work.

I’m fine with having the whole block in one color. I don’t need to be able to change the color in the middle of the block (though that would also be fine). I just want to be able to set the color of the text for a block without changing anything else about how the block functions.

Sorry if I’m having trouble making that clear :thinking:

13

For changing in the middle of the block, look above.
For changing the whole block, could combine a macro with some custom code:

  • In file custom.js, add this code:
const coloredBlockObserver = new MutationObserver(() => {
    document.querySelectorAll("span.colored-block").forEach(
        (span)=>{ span.closest(".block-content").style.color = span.style.color }
    );
});

coloredBlockObserver.observe(document.getElementById("main-content-container"), {
    attributes: true,
    subtree: true,
    attributeFilter: ["class"],
});
  • In file config.edn, inside :macros {}, add a line like the ones below:
    • :colored-block "<span class='colored-block' style='color: $1' />"
    • :light-yellow-block "<span class='colored-block' style='color: #d9d898' />"
  • Then inside a block, type respectively:
    • {{colored-block <color>}}<text>
      • e.g. {{colored-block #d9d898}}this is a test text, which should be colored
    • {{light-yellow-block}}<text>
      • e.g. {{light-yellow-block}}this is a test text, which should be colored
1 Like
14
  • Hello, thanks for this solution so far. Do you have any idea, why my block always has some line break after the color-changed words?
  • Some colors do work normal, but especially after red text there’s always a line break (doesn’t matter if I use the solution in :macros {} or just write the span-command in my text)…
  • these are my words in the block
    {{red "this is a test"}} for line break
    this is what I wrote in :macros {}
    :red "[:span {:style \"color: red\"} $1]"
    and this is what it almost always looks like
    image

Long question short: How can I avoid the line break while changing the color of my text (usually only a few words of the block)

Thanks a lot!

15

Welcome. It is a matter of css styles. Try adding the following in file custom.css:

.macro,
.macro .hiccup_html,
.macro .raw_html {
    display: inline;
}
1 Like
16

thanks! this also works for my underlined text :slight_smile:

17

I created a Pull Request to add this feature to logseq

When its added, you should be able to use the logseq.text-color:: property

18

Such approaches don’t scale very well. I would rather use a logseq.css-class:: property that applies the passed class(es) to the block’s element, enabling users to style any block however they want.

1 Like
19

Oh, I like the idea too.

I think both things are compatible, but just because I think that text-color is as important as the already existing background-color property. Nevertheless, It is true that adding more than a couple of properties would not hold up in the long term…

If/when my proposal is merged, I’ll make another one adding logseq.css-class::

1 Like