#1

What’s the easiest way to have colored text, please?

CSS? I am familiar enough with CSS in the context of web pages; don’t need anything more sophisticated than is offered by TextEdit, which is too buggy - so am switching to Obsidian instead :slight_smile:.

Coloured text and a choice of fonts (as well, perhaps as sub- and super-scripts) are the only things that I haven’t so far explored in Obsidian that I miss from TextEdit.

TIA for any pointers which anyone has a minute to provide :slight_smile: .

4 Likes
Changing the colour of text I've highlighted
#2

CSS snippets are probably the best solution. If you know CSS, you can use the developer console (⌘ + option + i on Mac) to target CSS elements.

Obsidian uses Markdown, so there isn’t any built-in functionality for sub and superscripts, but you could possibly try MathJax, which is supported natively. It may not be exactly what you need, since it’s aimed at people creating math equations. Let me know if you have any questions :smiley:

#3

For CSS, a great source for snippets is this Github repo or checking out this forum thread

For coloring text, you can use Deathau’s Notation Colour Blocks which will look in edit mode like:

``` note-purple
This text will be pruple
```\

or

<span class="purple"> This note will be purple </span>

Alternatively you can use the 8+8 highlight snippet to color highlighted, italicized or bolded text using tags

e.g.

#h/red **This bold text will be red**
#h/red ==This highlighted text will be highlighted red==
#h/red *This italicized text will be red*
1 Like
Custom CSS for changing color of font for italics
#4

Thanks, Jonathan!

I’m new to Obsidian, so wasn’t aware of the Developer Console.

Once there, do I simply add a new CSS Class somewhere in those definitions?

Or would it be better to do write and add the few simple classes that I would like to have for colored text inside the .obsidian/snippets folder? If so, in what format, please?

I’ll take a look at MathJax.

#5

Thanks, Elianah Marie!

I looked at all those solutions - and think I can see how they work :slight_smile: .

I can certainly see how to put a CSS file (potentially with the definitions I want… starting small at first) into .obsidian/snippets.

Though I learnt that you do have to specifically activate such a file - and relaunch Obsidian.

But am I right that you have to actually add the code to strings of texts in (Obsidian’s) Edit mode; and that there’s no ‘quasi-WYSIWYG’ way to do this?

And that - assuming I get a snippet with my own colours - it can’t be made to apply across all my Vaults; and that - if not - I have to get the css file into .obsidian/snippets each time manually at the command line?

Your suggestions and links etc all carefully noted; and appreciated!

#6

The developer console works just like the dev tools in a browser. You can use your mouse discover which CSS classes apply to each element. From there, you can see which classes you should target with your snippets.

Yes, you have to add the code in your text. Since Obsidian uses Markdown, coloring text isn’t built in. You can put == before and after text to highlight text, but it only works with one color.

From my understanding, you’ll be able to see the colors in edit mode for the 8+8 highlight colors snippet and I think Notation Colour Blocks only works in preview mode.

#7

Thanks again, Jonathan; I think I’m making progress - though slow.

I have downloaded 8+8 and put it in /.obsidian/snippets, then activated it.

But I’m not sure how to ‘call’ any (re-)defined CSS class from Obsidian.

At this point I’m really only trying to gain parity with TextEdit.

For instance, I mark any text (in TextEdit) orange that I know I’ll need to return to after checking (say, the accuracy of) something. Just that (at this point, anyway :slight_smile: ).

How would I do that using the 8+8 snippet, please?

And, is the 8+8 snippet a good representative example of the way Obsidian likes to use CSS? No headers? No other definitions than the classes in the usual way?

TIA!

#8

To use the snippet, just put #h/<name of color> tag before the text you want to change. It will work for highlighting (putting == before and after word(s)), bolding (** before and after word(s)), and italicizing (* or _ before and after word(s)). The 8+8 snippet doesn’t have orange built-in, so you would have to add it yourself. If you wanted to highlight a word green, this is what it would look like:

#h/green highlighted text is green

Result:

image
image758×96 7.13 KB

The #h/green disappears when you click on a different line.

Yes, snippets are appended to the end of your CSS file, so it will override whatever else you have.

#9

Thanks, Jonathan! I see how it works. I have now managed successfully to edit (a copy of) 8+8 to add orange to pink…

What I’d really like to do is get CSS to change the colour of plain text (that is, not a header).

If I have two css snippet files (e.g. the original 8+8 and then one I write), what’s the order of precedence in the way they are appended?

#10

Unfortunately, I’m not a CSS expert, but luckily there are many in the Obsidian Discord server. Check out #css-themes. I’m sure people would be happy to help you out.

1 Like
#11

Hi! In response to this:

Using the 8+8 snippet means using the hashtag (e.g. #h/orange). Searching for the lines colored orange would be very simple. In the search pane or query code block, simply search tag:#h/orange then it would bring up all files tagged that way

8+8 is actually a unique application of css since it uses tags to colorize the consequent text. css in obsidian is usually (1) used across the vault (2) called for specific pages by using cssclass in YAML or (3) called in html classes

There is the classic way of coloring text with html without css e.g.

<font color="red"> This text is red </font>

but it would only show in preview, regular markdown formatting will not work within the html and too much html looks clunky in edit mode, especially in the middle of a paragraph.

What do you mean by headers?

#12

Will do; thanks, Jonathan!

1 Like
#13

Thanks, @DEV_Scribbles!

I managed to get 8 + 8 working and was able to write a small addition to it to change headers (prepended, as you kindly say, by #h/…).

In fact all I want to be able to do - and I do appreciate that Markdown doesn’t really/officially support this kind of formatting, although I hope Obsidian might - is change the colour of single words, phrases, lines of body text (not headers - which is why I can’t really use (a variation on) #h) so that they stand out in a way that merely bolding and italicizing doesn’t.

I’m not fixated on orange, I promise; I see that 8 + 8 uses a multitude of other colours. My own note-taking convention ever since I began to use TextEdit (which I am now abandoning in favor of Obsidian) is that orange jumps out at the reader; for me it means: “go back and check this”/“This hasn’t been (fact-) checked”/“This may be wrong or incomplete”.

Once I have corrected/completed/verified this text, in TextEdit I simply select it and change it back to black.

I’m looking for something similar - albeit even, perhaps, only in Preview mode - in Obsidian. For any segment of body text.

#14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.