Obsidian 样式 - 核心大纲 outline 标题显示自动编号

对 Obsidian 的核心插件 Outline 进行优化，自动对标题进行编号。请注意，该编号不会实际修改文档中的标题编号。

样式一：从一级标题开始计数

/* https://github.com/platon-ivanov/obsidian-visually-numbered-headings/issues/16 */
.workspace-leaf-content[data-type="outline"] {
  counter-reset: rootCounter;

  .tree-item .tree-item-self .tree-item-inner::before {
    content: counters(rootCounter, ".") ". ";
    counter-increment: rootCounter;
  }

  /* container of the ohter headings. */
  /* NOTE: It is not .outline anymore. So we need a new counter */
  .tree-item-children {
    counter-reset: innerCounter;
  }

  .tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
    content: counters(rootCounter, ".") "."counters(innerCounter, ".") ". ";
    counter-increment: innerCounter;
  }
}

样式二：从二级标题开始计数

/*! Visually Numbered Headings */
/* https://github.com/platon-ivanov/obsidian-visually-numbered-headings/issues/16 */

/* container of first layer headings. */
.workspace-leaf-content[data-type="outline"] {
  counter-reset: rootCounter;
	tree-item .tree-item-self .tree-item-inner::before {
	  /* content: counters(rootCounter, ".") " "; */
	  counter-increment: rootCounter;
	}
	
	/* container of the ohter headings. */
	/* NOTE: It is not .outline anymore. So we need a new counter */
	.tree-item-children {
	  counter-reset: innerCounter 0;
	}
	
	.tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
	  /* content: counters(rootCounter, ".") "." counters(innerCounter, ".") " "; */
	  content: counters(innerCounter, ".") " ";
	  counter-increment: innerCounter;
	}
}

拓展样式：文件大纲显示编号

/* https://github.com/platon-ivanov/obsidian-visually-numbered-headings/issues/16 */
.workspace-leaf-content[data-type="file-explorer"] {
  counter-reset: rootCounter;

  .tree-item .tree-item-self .tree-item-inner::before {
    content: counters(rootCounter, ".") ". ";
    counter-increment: rootCounter;
  }

  /* container of the ohter headings. */
  /* NOTE: It is not .outline anymore. So we need a new counter */
  .tree-item-children {
    counter-reset: innerCounter;
  }

  .tree-item-children .tree-item .tree-item-self .tree-item-inner::before {
    content: counters(rootCounter, ".") "."counters(innerCounter, ".") ". ";
    counter-increment: innerCounter;
  }
}

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。