Highlighting and underlining (CSS Hack)


#1

I have been trying to figure out how to enable highlighting of text (like with a yellow marker) and underlining. I thought that CSS customization would solve, this, but it doesn’t, or it does and it doesn’t.

First, it’s not possible as far as I can tell because of the HTML format in Dynalist. CSS does not have the ability to search in text within span or div tags for a pattern of text, and since we can’t use custom markup yet, there does not seem to be a way to do this.

However, I realized I was not using regularly the Italics __ nor the strikethrough ~~ markup. Therefore I modified them for my own evil intentions, real highlighting and underlining using the following CSS custom markup:

.node-strike-through {
  background-color: #ffec84;
  text-decoration: none;
}

.node-italics {
  text-decoration: underline;
  font-style: normal;
}

This gives me the following results:

Something else useful is that toggle help pain will show you your customization so you can remember what you changed the various markup to do:

I hope someone else might find this useful.

Chris


#2

Wanna share in it Share & Showcase? :smiley:


#4

Thanks for pointing that out – I edited the category description.

The old one was from waaaay back :slight_smile:


#5

This is a brilliant Idea “hack”. Now that I think about it, I don’t really use strikethrough and could use it to have highlighting.

Besides, I suggested to add custom CSS classes with (custom) delimiters here:


#6

Thank you and I like your suggestion for customizable markup. This suggestion for highlighting and underlining I use frequently and it looks very nice. But I would prefer not to hack the existing native functionality.


#7

Everything’s a stack of hacks on hacks on hacks all the way down to where they tricked some purified sand etches into doing math and branching on 0


#8

I’ve figured out this one to change italics into faded. It’s like the reverse of bold - for text you want to fade into the background unless you seek to see it.

image

.node-italics {
  color: #aaaaaa;
  font-style: normal;
}

thanks