Custom Table of content (TOC) callout. Like word, docs, etc

Custom CSS & Theme Design
1

I created a custom CSS to easily have a table of contents that looks like that of Word, Google docs, etc… and that can easily be customized.

It is still necessary to enter all the data by hand because it is not a plugin, but at least we have correct formatting.

> [!toc] Table of content
> - [[#1. Link to section 1]] *1-2*
> - [[#2. Link to section 2]] *3-5*
>    - [[#2.1 Link to sub section 2.1]] *3-4*
>    - [[#2.2 Link to sub section 2.2]] *5-5*
> - [[#3. Link to section 3]] *6-8*

Your table of contents should be an unordered list, em ** is used to define the end of the line.

Result :

image
image729×236 11.2 KB

And here is the CSS :

/* [custom] Table of contents */

.callout[data-callout="toc" i] {
    --callout-padding: 0;
    --callout-color: 22, 22, 22;
    --callout-icon: lucide-list-ordered;
    --list-spacing: 4pt;
    background-color: transparent;
}

.callout[data-callout="toc" i] ul {
    --list-indent: 1.5em;
    -webkit-margin-after: 0;
    margin-block-end: 0;
}

.callout[data-callout="toc" i] ul ul {
    padding-inline-start: var(--list-indent);
    margin-top: var(--list-spacing);
}

.callout[data-callout="toc" i] li {
    list-style-type: none;
    margin-inline-start: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.callout[data-callout="toc" i] li > ul {
    flex: none;
    width: 100%;
}

.callout[data-callout="toc" i] a {
    text-decoration: none;
}

.callout[data-callout="toc" i] em {
    flex: 1 1 0%;
    text-align: right;
    display: flex;
    align-items: center;
    color: var(--color-base-80);
    font-size: var(--font-small);
    font-style: normal;
}

.callout[data-callout="toc" i] em::before {
    content: "";
    height: 0.5em;
    flex: 1 1 0%;
    border-bottom: 1px dotted var(--color-base-40);
    margin: 0 0.5em;
}