Harmonising indentation (after bullets, numbers, tasks lists) between live preview and read layout

Harmonizing indentation (after bullets, numbers, tasks lists) between live preview and read layout

In the read view layout, indentation after bullets, numbers, tasks lists, and text is perfectly fine, crisp, readable, and unified, while in the live preview text is too close, lists are off and not unified between lists… I tried to produce css to rectify it, even with the help of default app.css file, but without complete success. Can somebody help me out, or perhaps this can be corrected in the future version of application, so that live preview in respect of lists is formatted the same way as read layout?
TYIA.

1 Like

If you don’t show any examples, we can’t really help much.

Share some Markdown as written in a note, in a code block using backticks, and say what you are looking to change.

That can be a start.

Here is my attempt in extracting relevant CSS that I have spread across a bajillion CSS files. I cannot cover all crook and cranny, so you have to maintain the snippet on your own.

body {
    --code-size: var(--font-smallest);
    --code-radius: 0.4rem;

    --line-height-tight: 1.4;

    --h1-size: 1.85rem;
    --h2-size: 1.65rem;
    --h3-size: 1.45rem;
    --h4-size: 1.25rem;
    --h5-size: 1.15rem;
    --h6-size: 1.00rem;

    --h1-line-height: none;
    --h2-line-height: none;
    --h3-line-height: none;
    --h4-line-height: none;
    --h5-line-height: none;
    --h6-line-height: none;

    --bold-color: inherit;

    --line-height-normal: 1.4;
    --p-spacing: 0.4rem;
    --hr-thickness: 0.1rem;
    --list-indent: 1.94rem;
    --blockquote-border-thickness: 0.2rem;

    --indentation-guide-source-indent: 0.85rem;
    --indentation-guide-reading-indent: -0.86rem;
    --indentation-guide-editing-indent: 0.84rem;
}

.markdown-source-view.is-live-preview {
    --list-padding-inline-start: 0.5rem;
}

/**************** IMAGE ****************/

.markdown-rendered p:has(img) {
    margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
}

.markdown-reading-view {
    p:has(img) br {
        display: none;
    }
}

/**************** LINE ****************/

.HyperMD-list-line.cm-line:not(.HyperMD-codeblock) {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}

.cm-formatting.cm-formatting-list {
    .list-bullet {
        padding-inline-end: 0.23rem;
        font-size: 110%;
        line-height: calc(var(--line-height-normal) - 1);
        transform: translateX(-1px);
    }
}

.markdown-rendered {
    ol:first-child > li {
        margin-inline-start: 1.8rem;
    }
    ol ul::before {
        left: -0.89rem !important;
    }
    .list-bullet {
        font-size: 110%;
        line-height: calc(var(--line-height-normal) - 0.3);
        margin-inline-start: -0.85rem;
    }
    li:has(span.math-inline mjx-mfrac) .list-bullet::before {
        margin-top: 18px;
    }
}

.cm-formatting-list-ul {
    padding-inline-start: 0.8rem;
}
.cm-formatting-list-ol {
    padding-inline-start: 0.64rem;
}

div>ul.has-list-bullet {
    margin-left: -0.175em;
}

.markdown-rendered ul>li,
.markdown-rendered ol>li,
.markdown-preview-view ol>li,
.markdown-preview-view ul>li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: var(--p-spacing) !important;
    margin-bottom: var(--p-spacing) !important;
}

li,
ul.has-list-bullet {
    margin-top: var(--p-spacing) !important;
    margin-bottom: var(--p-spacing) !important;
}

.el-ul ul li br,
.el-ol ol li br {
    content: ' ';
    display: block;
    padding: 0.2rem 0;
}

ol {
    margin-top: 0 !important;
}

ul ul,
ol ol,
ol ul,
ul ol,
.cm-hmd-list-indent .cm-tab {
    position: relative;
}

.cm-formatting-task {
    font-size: var(--font-smaller);
}

.markdown-source-view.mod-cm6 {
    .HyperMD-list-line-nobullet {
        /* --list-indent: 1.85rem; */
    }
}

.cm-line:not(.HyperMD-list-line):not(:has(> br)) + .cm-line.HyperMD-list-line {
    padding-top: 0.4rem;
}
.cm-line.HyperMD-list-line + .cm-line:not(.HyperMD-list-line, .HyperMD-codeblock):not(:has(> br)) {
    padding-top: 0.2rem !important;
}

.cm-line.HyperMD-codeblock + .cm-line.HyperMD-list-line:not(.HyperMD-codeblock) {
    padding-top: 0.6rem !important;
}
.cm-line.HyperMD-list-line:not(.HyperMD-codeblock) + .cm-line.HyperMD-codeblock-begin {
    margin-top: 0.4rem !important;
}
.cm-line.HyperMD-codeblock-end + .cm-line.HyperMD-codeblock-begin {
    padding-top: 0;
    margin-top: 0.65rem !important;
}

.popover:not(.is-editing) .markdown-rendered,
.markdown-reading-view {
    h1, h2, h3, h4, h5, h6 {
        padding: 0;
    }
    .el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6 {
        margin: 0.5rem 0;
    }
}

.HyperMD-header.HyperMD-header-1.cm-line,
.HyperMD-header.HyperMD-header-2.cm-line,
.HyperMD-header.HyperMD-header-3.cm-line,
.HyperMD-header.HyperMD-header-4.cm-line,
.HyperMD-header.HyperMD-header-5.cm-line,
.HyperMD-header.HyperMD-header-6.cm-line {
    padding: 0.25rem 0;
    letter-spacing: normal !important;
}

/**************** CODE ****************/

.cm-header.cm-inline-code {
    font-size: 90% !important;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: normal !important;
    code {
        font-size: 90% !important;
    }
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
    padding-inline-start: 0.84rem;

    /* .cm-indent {
        font-size: var(--font-ui-smaller);
    } */
}

.HyperMD-codeblock-begin .cm-indent::before,
.cm-hmd-codeblock .cm-indent::before {
    margin-left: 0 !important;
    transform: none;
}

/**************** CALLOUT ****************/

.markdown-source-view.mod-cm6 {
    .cm-line.HyperMD-quote .cm-indent::before {
        margin-inline-start: 0;
    }

    .HyperMD-quote-lazy:not([style]) {
        padding-inline-start: 15px;
    }
}

Fair remark. I provided screenshots of the “issue” with description on the screenshot.

Ideally, I’d like to have a snippet that would format source mode and preview mode in the same way as reading mode, with reading mode to be changed to increase distance between number and text (so that numbers are a bit more left),
Hope I clarified a bit. TYIA.