Outline core plugin - repo, footnotes, markdown, CSS options

These ideas regard the ‘Outline’ core plugin. I’ve searched for an official repo so I can post these under Issues but can’t find it.

It would be nice if, at the bottom of the outline, there were a link to the footnotes section if footnotes exist for that article (see screenshot but imagine there’s no “V.”).

As shown at the bottom of the screenshot, Markdown isn’t rendered (e.g. if a heading has an italicized word, it currently appears as asterisks in the Outline).

Visual options, such as turning horizontal overflow into ellipses and numbering each level, are possible with these CSS tweaks (I’m using Moonlight theme):

div[data-type="outline"] > .view-content {
    padding: 0.5em 0.5em; 
}

/* bullets and icons */
div[data-type="outline"] * .tree-item::marker {
    color: var(--text-muted);
}
div[data-type="outline"] * .tree-item {
    display: list-item;
}
div[data-type="outline"] * .collapse-icon {
    display: none;
}
div[data-type="outline"] * .tree-item-self {
    padding-left: 0.35em;
}

/* h1 */
div[data-type="outline"] > .view-content > .outline > .tree-item > .tree-item-self {
    text-decoration: underline;
    text-align: center;
}
/* h2 */
div[data-type="outline"] > .view-content > .outline > .tree-item > .tree-item-children > .tree-item {
    list-style-type: upper-roman;
}
/* h3 */
div[data-type="outline"] > .view-content > .outline > .tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item {
    list-style-type: upper-alpha;
}
/* h4 */
div[data-type="outline"] > .view-content > .outline > .tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item {
    list-style-type: decimal;
}
/* h5 */
div[data-type="outline"] > .view-content > .outline > .tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item {
    list-style-type: lower-alpha;
}

/* cut off horizontal overflow with ellipsis */
div[data-type="outline"] * .tree-item-inner {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--text-normal);
    align-self: baseline;
}

4 Likes