onlyafly / number-headings-obsidian

Automatically number headings in a document in Obsidian
MIT License
104 stars 11 forks source link

Is it possible to render only the numbering of the titles without writing the numbers to the file? #56

Closed wwjCMP closed 8 months ago

wwjCMP commented 9 months ago

Considering that introducing numbers that may change at any time into the title may cause some unexpected issues, is it possible to only render title numbers without writing them into the file?

viocha commented 8 months ago

I also believe this feature is necessary. At present, the plugin alters the file content directly. In other words, it modifies the actual content. A more suitable solution would be to utilize CSS techniques, such as the pseudo-element, to add numbering to the headings, thereby making the headings uneditable. Furthermore, the current speed of updating the numbering is not fast enough.

gaardhus commented 8 months ago

You can achieve this by adding the following to a custom CSS Snippet (see Settings -> Appearance -> CSS snippets, where you can open the appropriate folder, create a file, and add the content below):

/* This styles makes the headers align with the rest of the body */
/* Remove this if you don't want the numbers to be hovering the the left of the headers */
.HyperMD-header:before {
    position:absolute;
    right:100%;
    text-align:right;
    white-space:nowrap;
}
/* Fixes fold indicator position */
div.HyperMD-header:hover{
    padding-left: 18px !important;
}

div.cm-content div:has(>div.is-collapsed) {
    padding-left: 9px !important;
}

/* Add counters to the content of the before pseudo elements */
/* Modify the content accordingly if you want headers of lvl 1 to also be numbered */
.HyperMD-header-1 {
    counter-reset: h2counter;
}

.HyperMD-header-2:before {
    content: counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;
}

.HyperMD-header-2 {
  counter-reset: h3counter;
}

.HyperMD-header-3:before {
    content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment: h3counter;
}

.HyperMD-header-3 {
  counter-reset:h4counter;
}

.HyperMD-header-4:before {
  content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
  counter-increment: h4counter;
}

This could probably pretty easily be incorporated into the plugin. The fixing of the folding needs to change if you want to change the alignment of the numbering. Maybe its better handled with javascript too.

onlyafly commented 8 months ago

It was an intentional design choice of mine for this plugin to insert text and not use CSS. But maybe a good choice for a different plugin!