A developer reviewing generated HTML in a split pane can have a readable webpage preview beside source that is too small to inspect. Changing the page's body font does not solve that source-reading problem. Give the author a source-size control connected to the Monaco instance they are using.
Update the existing editor
With editor referring to the initialized Monaco instance:
function setSourceTextSize(size) {
if (![14, 18, 22].includes(size)) return false;
editor.updateOptions({ fontSize: size });
return true;
}
The three sizes are an illustrative application choice, not Monaco's full supported range or a claim about everyone's preferred reading size. The explicit allowed list keeps a dropdown value from becoming an arbitrary option value. Use the same values in the control:
<label for="source-size">Source text size</label>
<select id="source-size">
<option value="14">14 px</option>
<option value="18" selected>18 px</option>
<option value="22">22 px</option>
</select>
const sourceSize = document.querySelector('#source-size');
setSourceTextSize(Number(sourceSize.value));
function changeSourceSize() {
setSourceTextSize(Number(sourceSize.value));
}
sourceSize.addEventListener('change', changeSourceSize);
Initialize the editor and the selector consistently. An 18 px label should not sit beside an editor still using another size. Remove the application listener when its component unmounts. There is no reason to create a replacement model or call setValue() for a viewing preference.
Let Monaco measure its own text
Prefer Monaco's public option to a CSS override on its internal .view-line elements. The editor uses font measurements for character positions, cursor placement, and scrolling. A stylesheet that visually stretches one internal element can leave the measured editing geometry inconsistent.
An application that also fixes lineHeight should review that setting when increasing text size. The options reference documents separate line-height control. Avoid preserving a cramped fixed height simply because it looked acceptable at the old size. Inspect the caret, selection background, and characters with ascenders and descenders at every offered size.
The container still needs usable dimensions. A larger font naturally shows fewer source columns and lines. If the pane changes size, retain the application's layout handling described in the Monaco HTML setup. Soft wrapping is a separate decision about long source lines.
Keep browser zoom and editor preferences understandable
Browser zoom changes the surrounding interface too. Monaco's mouseWheelZoom option instead enables changing the editor font with Ctrl plus the mouse wheel, and is documented as disabled by default. A visible selector is a useful primary control because it does not depend on discovering that gesture.
If you enable the gesture, keep any displayed size indicator synchronized with the actual editor state; otherwise the selector can report an old size. This example leaves the gesture unchanged and only implements the visible selector. It does not override a person's browser zoom controls.
Check the actual source at each size
Use a disposable HTML notice containing a long attribute value, quoted text, and several lines. Record editor.getModel().getValue(), then choose 14, 18, and 22 px in the selector. At each size, read the text, place the caret inside an attribute, and inspect a selected phrase. The characters should remain aligned with the caret and selection.
Compare the source string afterward. It should be identical to the initial value. Read the separate page preview as well: its content styling should still follow the HTML and CSS, regardless of the source pane's text size. Keep the reading preference separate from the document's save operation.