CSS - Styling Line Numbers

Help
#1

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.

#2

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