Canvas: font-size in editing mode

[Dnarts]

What I’m trying to do

Make the font larger while editing the text of the card. Since I enlarged it with snippet in rendering mode, but I could not discover a property for text size WHILE I was editing the card.

Things I have tried

Claude and GPT → works fine except for the problem I have described.

.canvas-node-container {
    --base-font-size: 19px;
    font-size: var(--base-font-size);
}

.canvas-node-container p {
    font-size: calc(var(--base-font-size) * 1.4);
}


.canvas-node-container pre,
.canvas-node-container code,
.canvas-node-container li {
    font-size: calc(var(--base-font-size) * 1.3);
}

.canvas-node-container .markdown-rendered pre,
.canvas-node-container .markdown-rendered code {
    font-size: calc(var(--base-font-size) * 1.3);
}

.canvas-node-container .markdown-rendered code:not(pre > code) {
    font-size: calc(var(--base-font-size) * 1.3);
}

.canvas-node-container .markdown-rendered pre > code {
    font-size: calc(var(--base-font-size) * 1.3);
}

.canvas-node-container .markdown-rendered .code-block-wrapper pre {
    font-size: calc(var(--base-font-size) * 1.3);
}



.canvas-node-container .markdown-rendered div[class*='language-'] {
    font-size: calc(var(--base-font-size) * 1.3);
}

.canvas-node-container small {
    font-size: 1em;
}

.canvas-node-container .admonition,
.canvas-node-container .admonition-content,
.canvas-node-container .admonition pre,
.canvas-node-container .admonition code {
    font-size: calc(var(--base-font-size) * 1.3) !important;
}

.canvas-node-container pre,
.canvas-node-container code,
.canvas-node-container .code-block {
    font-size: calc(var(--base-font-size) * 1.3) !important;
}

[ariehen]

When you are editing a card it’s a mini editor so CSS targeting the editor is required. Most, if not all, of the above CSS is only for Reading view / rendered contexts, i.e., when you are clicked-out of the card and it’s rendered.

---

Something like this should cover the basics and not alter regular notes, but may need to be adjusted if some elements aren’t covered.

.mod-inside-iframe > .cm-editor > .cm-scroller {
    /* font-family: 'Comic Sans MS'; */
    font-size: 1.2em;
    /* color: hotpink; */
}

The font size can, of course, be a px value.