Font size in editor

[olesk75]

Hi,
Perhaps it would be helpful to have a font size selector in the editor. I personally find the editor font way too large on a low res display. Is there any easy way to reduce the font size in the config currently?

[jackycute]

Hi @olesk75 No, there isn't any way to change the editor font size. Maybe we could make this available as a preference.

Thanks for suggestion.

[ccoenen]

Well, there is a way to change to font size in the editor. But it will also change the font size of the preview, so I don't know if @olesk75 is happy with that.

HackMD works beautifully regardless of browser-zoom-level. In case you did not use it before: it works in pretty much every single browser, try hitting Ctrl++ / Ctrl+- (reset to default size with Ctrl+0). This can also be controlled with your mouse wheel or touchpad: Ctrl+(use your mousewheel or do a scrolling gesture).

I personally don't think that the editor needs an option for that. I'm using browser zoom all the time, depending on which machine I'm using or if i'm in a situation with many people in front of one screen.

[olesk75]

It's not really a biggie, I've just noticed that the editor font tends to get big relative to the display font on lower resolution displays. Browser zoom works, but I'd prefer to have the editor pane (and font) much smaller than the display. And I generally think it's a nice feature to be able to have a user adjustable font size preference, ideally without having to manually zoom the entire browser/app window. But again, I don't think I'll try to argue for making this a high priority - just a nice-to-have :)

[Turakar]

I'm interested in this feature, too. The browser zoom is not very convenient, as it also changes the display size. Especially in side-by-side mode this does not really solve the initial problem of the editor font being a bit too large (IMHO) compared to the display font. This feature could be implemented either as a slider, or more simple, as a pair of +/- buttons.

[ccoenen]

(please don't take this personally)

I am VERY strongly against putting yet another piece of user interface clutter somewhere. No, not even "just two buttons". They don't belong there. If at all, this might be a user setting, but as of now we don't yet have such a thing.

[Turakar]

(won't take it personally, no problem)

I understand your point, but it has to be noted that there are already quite some features at the bottom editing bar, which aren't disturbing to the user (i.e. me in my self-experiment). The +/- buttons are included even in very simple text editors and belong to the fundamental features of those.

An user setting would not be the cleaner solution to this, as this prevents guests from using the feature. Maybe there are some other opinions about this, but as I'm not a maintainer of this project, and it seems like this is a design decision, I will not insist on this.

[NicolasCast]

Hello and many thanks for this nice tool.

Just to mention it, I think it is possible to change (the Editor's font size by acting server side. This possibility is not manageable by the user, but may help in some cases.

To that aim, change a font-size CSS property in the file build/index.css, more precisely in the CodeMirror class' CSS:

.CodeMirror {
    font-family: "Source Code Pro", Consolas, monaco, monospace;
    letter-spacing: 0.025em;
    line-height: 1.25;
    font-size: 18px;       /* HERE */
    height: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

Then reload the page client size of course.

But perhaps there is another, better way, to configure the editor's font server side ?

[aubreypwd]

.CodeMirror {
    font-family: "Menlo", "Source Code Pro", Consolas, monaco, monospace;
    letter-spacing: 0.025em;
    line-height: 1.25;
    font-size: 13px;       /* HERE */
    height: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

This worked very well using https://github.com/webcatalog/webcatalog-app

[dcervenkov]

It's been almost six years since this was first reported - are there any plans to solve the issue?

[JessRiedel]

HackMD works beautifully regardless of browser-zoom-level. In case you did not use it before: it works in pretty much every single browser, try hitting Ctrl++ / Ctrl+- (reset to default size with Ctrl+0). This can also be controlled with your mouse wheel or touchpad: Ctrl+(use your mousewheel or do a scrolling gesture).

In case it's useful to others: Ctrl++ / Ctrl+- didn't work for me on MacOS Chrome, but adjusting zoom on the Chrome three-dot menu did work.

FWIW, I think +/- buttons in the editor would be better. At the least it should say somewhere in the editor or settings how to adjust zoom in the browser. (It's not at all standard across the web, much less obvious to the average user, that font size here would be controlled by the browser.) I shouldn't need to come to GitHub to figure this out.

Also, adjusting the browser zoom can cause the table of contents to appear/disappear between the editor in the viewer panels. I guess the user can't control this? It's very confusing.