CSS - Styling Line Numbers

Things I have tried

.CodeMirror-linenumber {
  font-size: 20px !important;
}

I’ve tried em, px, percentage values here and none of these seem to work.

What I’m trying to do

Adjust line number sizing in CSS theming. When I inspect source I see in the base app.css this snippet:

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

So it seems like this is the correct element to style, but I’m unable to get CSS to stick, the format of the line number doesn’t change.

If you mean the line numbers in the gutter when in source / live-preview mode, the following works in my vault:

```css
/* ROW NUMBERS IN GUTTER SOURCE / LIVE PREVIEW */
.markdown-source-view.mod-cm6 .cm-gutters {
  padding-right: 2px;
  font-size: 0.6REM;
}

/* POSITION OF ROW NUMBERS IN GUTTER SOURCE / LIVE PREVIEW */
.markdown-source-view.mod-cm6 .cm-scroller {
  padding: 10px;
}
```

I use the base theme with a snippet file to modify a few items. A full theme might change the css completely, so this snippet might not work.

Angel

1 Like