#2

nice, tried it , worked great.

#3

How do I make the checkboxes as I type? (what key combinations?)

#4

I don’t know about a key combination, but you’d type them like this: - [ ] your todo

#5

Here is the AHK script that I use
; TO DO LIST - press Alt+G
!g::
send - [ ]
return

3 Likes
#6

The checkbox and the text next to it are not aligned properly.
checkbox

2 Likes
#7

Love this styling, makes my priorities list way nicer

But I noticed 1 issue: they don’t render in floating transclusions, I only see list bullet points in place of checkboxes. (They do render in in-place transclusions)

Is this an issue with my theme or something this snippet should(could) address?

#8

What is a floating transclusion?

#9

It’s what I call the thing that appears when you hover in Preview on an internal link.

(I realize it’s a misnomer, not actually a transclusion; more like a link preview…)

#10

Add
vertical-align: middle;
After the first line of the Css code snippet and they should improve

4 Likes
#11

Thanks, @rsdimitrov, that works.

#12

One small improvement I have made is to add this code which helps long lines wrap correctly (i.e. indent at the checkbox). You may need to change the indent value to fit the font you’re using.

.markdown-preview-view .task-list-item { text-indent: -30px; margin-left:0;}

Screen Shot 2020-07-03 at 11.09.01 AM
Screen Shot 2020-07-03 at 11.09.01 AM1842×486 34.7 KB

1 Like
#13

@kepano Works great.

Just a minor issue: I notice that bullets underneath a checkbox are extra indented after the first line.

Screen Shot 2020-07-04 at 8.08.03 AM

Normal bullets without checkboxes are still fine tho.

#14

Ah good catch. Remove the code above and try this instead:

.markdown-preview-view .task-list-item-checkbox { margin-left:-25px; } .markdown-preview-view .task-list-item { padding-inline-start:25px; }

1 Like
#15

Works perfectly now. Thanks!

#16

It actually works really nice. Thanks a lot!!

Theme: obsidian_ia / Another iA Writer inspired theme
#17

I used the exact same code but the color is displayed wrong. This happens also when I use the code for the checkbox by @death_au
Bildschirmfoto 2021-02-13 um 17.52.38
Anyone any idea? @kepano

#18

I copy and pasted the code but I got purple boxes! Am I missing something obvious here? :joy:

image

#20

Did you check the color of this var?

--text-accent-hover
1 Like
#21

Thanks, that worked! But is there any way to change them from squares to circles like in the picture above? I copy and pasted the code but only got boxes.

#22

Try and change the border-radius. It worked in my case.