Initial checklist
Problem
Hi, I was trying out Milkdown and Crepe for the first time today.
I wanted to get a markdown editor working quickly, and really liked the Crepe existed and I didn't have to figure out things to do one by one with.
One of the issues I faced was that the font-size showing in the editor was 16px. While I use 14px everywhere else in my application
Solution
I tried going through the different theme options:
https://github.com/Milkdown/milkdown/blob/v7.20.0/packages/crepe/src/theme/nord/style.css
And setting various CSS variables. And it was helpful to change font-family. But I could not set the font-size.
I was hoping for a --crepe-base-font-size or so ... similar to --crepe-font-default
Alternatives
On further digging I found that the font size was hardcoded here:
https://github.com/Milkdown/milkdown/blob/v7.20.0/packages/crepe/src/theme/common/reset.css#L146
Then I eventually did a:
$ grep -r "font-size" node_modules/.pnpm/@milkdown+crepe@7.20.0_prosemirror-model@1.25.4_prosemirror-state@1.4.4_prosemirror-view@1.41.7_typescript@5.9.3/node_modules/@milkdown/crepe/src/theme
./common/reset.css: font-size: 42px;
./common/reset.css: font-size: 36px;
./common/reset.css: font-size: 32px;
./common/reset.css: font-size: 28px;
./common/reset.css: font-size: 24px;
./common/reset.css: font-size: 18px;
./common/reset.css: font-size: 16px;
./common/reset.css: font-size: 87.5%;
./common/link-tooltip.css: font-size: 14px;
./common/link-tooltip.css: font-size: 14px;
./common/link-tooltip.css: font-size: 12px;
./common/code-mirror.css: font-size: 12px;
./common/code-mirror.css: font-size: 12px;
./common/code-mirror.css: font-size: 14px;
./common/code-mirror.css: font-size: 14px;
./common/code-mirror.css: font-size: 12px;
./common/image-block.css: font-size: 16px;
./common/image-block.css: font-size: 14px;
./common/block-edit.css: font-size: 14px;
./common/block-edit.css: font-size: 14px;
./common/block-edit.css: font-size: 14px;
./common/top-bar.css: font-size: 14px;
./common/top-bar.css: font-size: 14px;
./common/table.css: font-size: 14px;
And manully wrote CSS classes for each of these.
Now, while I love that Milkdown is configurable and I can get this working, I felt it was a lot of work and Crepe should give me a simpler way to set --crepe-base-font-size so I can do this in 1 line instead of going through the source etc.
Initial checklist
Problem
Hi, I was trying out Milkdown and Crepe for the first time today.
I wanted to get a markdown editor working quickly, and really liked the Crepe existed and I didn't have to figure out things to do one by one with.
One of the issues I faced was that the font-size showing in the editor was 16px. While I use 14px everywhere else in my application
Solution
I tried going through the different theme options:
https://github.com/Milkdown/milkdown/blob/v7.20.0/packages/crepe/src/theme/nord/style.css
And setting various CSS variables. And it was helpful to change font-family. But I could not set the font-size.
I was hoping for a
--crepe-base-font-sizeor so ... similar to--crepe-font-defaultAlternatives
On further digging I found that the font size was hardcoded here:
https://github.com/Milkdown/milkdown/blob/v7.20.0/packages/crepe/src/theme/common/reset.css#L146
Then I eventually did a:
And manully wrote CSS classes for each of these.
Now, while I love that Milkdown is configurable and I can get this working, I felt it was a lot of work and Crepe should give me a simpler way to set
--crepe-base-font-sizeso I can do this in 1 line instead of going through the source etc.