Highlighting and underlining (CSS Hack)

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

14 Likes

Wanna share in it Share & Showcase? :smiley:

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

The old one was from waaaay back :slight_smile:

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:

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.

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

2 Likes

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

4 Likes

Amazing trick! Here is another one from me:
Eg. you highlight a lot. And writing ~~ something in between ~~~~ and not to forget ~~ in the end, can be cumbersome.
Alfred to the rescue:


Creates a text snippet and moves the cursor right to the middle like with brackets in any text or IDE of your choice.

2 Likes

I realize this post is almost two years old, so your methods might have changed, but I’ll add my own style here. I do like the italicized/skewed font for the italics markdown style, but for me, that’s not enough, so I add a bit of background shading, and a slightly “heavier” font weight.

My CSS:

.node-italics {
background-color: #F7F7F7;
padding: .25em 0;
font-weight: 500;
}

This gives me:

Dynalist-italics

@Mikhail_Mikhasev, I love using Alfred Snippets! Thanks for that one.