Highlighting and underlining (CSS Hack)

[Chris_Kunicki]

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

[Erica]

Wanna share in it Share & Showcase?

[Erica]

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

The old one was from waaaay back

[Viktor_Papara]

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:

Customizable markup delimiters

I have another suggestion that builds upon this: dummy CSS markup classes with custom delimiters. I really like and use the custom CSS feature! My proposal is this: there are several (maybe 3-6) dummy CSS markup classes without pre-defined delimiters; like a template. When a user sets delimiters in the settings, those do nothing at first (just inherit markup; or have no markup at all). But then the user can use custom CSS to define the markup they wish. This would allow us to a) hav…

[Chris_Kunicki]

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.

[BigChungus]

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

[BigChungus]

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.

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

thanks

[Mikhail_Mikhasev]

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.

[Nathan_Dunn]

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:

[Nathan_Dunn]

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

[Intrepidis]

I just do underlines with a fake link. Like this:

[underlined text](x:x)