Skip to content

[Feature] Adding --crepe-font-size variable to themes #2315

Description

@AbdealiLoKo

Initial checklist

  • I agree to follow the code of conduct
  • I searched issues and discussions and couldn’t find anything (or linked relevant results below)

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.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions