[css] numbered lists

create (simple) numbered lists :

tag a parent block with #numlist to replace bullets by numbers in the first-level children blocks - adapted from HannesFrank’ snippet for remnote

code:

/* numbered lists 0.2 20210220 */
/* usage : tag parent block with #numlist */

.ls-block[data-refs-self*="numlist"]
    > .block-children
	> .ls-block {
          counter-increment: lvlNumber;
		  }
.ls-block[data-refs-self*="numlist"] 
 > .block-children 
 > .ls-block div .bullet-container:before {
         content: counters(lvlNumber, ".") ".";
         position: absolute;
         left: 4px;
		 top: -10px;
		 display: block;
		 margin: 10px;
		 padding: 00px;
}
/* hide bullets */
	.ls-block[data-refs-self*="numlist"] 
	 > .block-children 
	 > .ls-block 
	 > .block-children div .bullet-container:before {
		content: "";
	}
	.ls-block[data-refs-self*="numlist"] 
	 > .block-children 
	 > .ls-block div .bullet {
		visibility: hidden;
	}
	.ls-block[data-refs-self*="numlist"] 
	 > .block-children 
	 > .ls-block 
	 > .block-children div .bullet {
		visibility: visible;
	}

install :

use stylish extension or put at the bottom of your custom css

1 Like

Very cool! Just to check, this is a css hack that is limited to changing the display on the current page, correct? The numbers won’t be captured if other pages show a numbered block with embed, and it doesn’t change the markdown to numbered items instead of headings?

It would be great if Logseq could actually parse markdown numbering.

yes it’s just a css display trick, it doesn’t modify the actual content and can’t be saved. it’s only useful for reading within logseq.

1 Like

actually the numbered-lists are correctly embedded (also works in nested embeds it seems).
same goes for tag-triggered kanban/columns view. it’s displayed correctly (and print works too, so yyou can export a pdf) as long as it is inside logseq.

1 Like
/* numbered lists 0.3 20210605 */
/* usage : tag parent block with #numlist or #.v-numlist*/

.ls-block[data-refs-self*="numlist"]
    > .block-children
	> .ls-block {
          counter-increment: lvlNumber;
		  }
.ls-block[data-refs-self*="numlist"] 
 > .block-children 
 > .ls-block > div > div > a > .bullet-container:before {
         content: counters(lvlNumber, ".") ":";
         position: absolute;
		 display: block;
}
.ls-block[data-refs-self*="numlist"]
    > .block-children
	> .ls-block > .block-children
	> .ls-block {
          counter-increment: sublvlNumber;
		  }
.ls-block[data-refs-self*="numlist"] 
 > .block-children 
 > .ls-block > .block-children > .ls-block > div > div > a > .bullet-container:before {
        content: counters(lvlNumber, ".") "." counters(sublvlNumber, ".") ":";
        position: absolute;
		 max-width: 60px;
	 	padding-right: 0px;
	    width: 40px;
}
.ls-block[data-refs-self*="numlist"] 
 > .block-children 
 > .ls-block > .block-children > .ls-block > div > div > .block-control {
	 	width: 30px !important;
	 margin-left: -0.75em;
}
.ls-block[data-refs-self*="numlist"] 
 > .block-children 
 > .ls-block > .block-children  {
		padding-left: 0.4em;
}

/* hide bullets */
	.ls-block[data-refs-self*="numlist"] 
	 > .block-children 
	 > .ls-block 
	 > .block-children div .bullet-container:before {
		content: "";
	}
	.ls-block[data-refs-self*="numlist"] 
	 > .block-children 
	 > .ls-block  > div > div > a > .bullet-container > .bullet {
		visibility: hidden;
	}
	.ls-block[data-refs-self*="numlist"] 
	 > .block-children 
	 > .ls-block  
	 > .block-children 
	 > .ls-block  > div > div > a > .bullet-container > .bullet {
		visibility: hidden;
	}

Unfortunately, while wonderful in itself, this CSS workaround looks bad in my custom theme. Here’s hoping real numbered lists will be implemented soon!