How to adjust line height in code cells?

JupyterLab
,
1

I have tried customize it via ~/.jupyter/custom/custom.css, but it’s no effect in JupyterLab.
I try this custom.css and many many other variation:

.jp-ThemedContainer.jp-CodeMirror-editor .CodeMirror-line {
    line-height: 0.8 !important; 
}

or

div.jp-ThemedContainer.cm-cell.cm-editor {
    line-height: 0.8; /* или любое другое значение */
}

or

:root {
     --jp-code-line-height: 0.8;
}

Example piece of code for custom.css from docs (interface_customization.html#jupyter-styling) works well.

I also try edit variable --jp-code-line-height at index.css in C:\ProgramData\anaconda3\envs\<my_conda_env_name>\share\jupyter\lab\themes\@jupyterlab\theme-light-extension, but it’s no effect. However editing --jp-content-line-height at index.css take effect on output text under cells.

I also try some extensions for this purpose.
Extension jupyterlab-fonts can properly adjust fonts and line height only for output cells. Adjusting line height for code has no effect.

I suppose changings described here affect to jupyterlab-fonts and other examples of custom.css, which I was able to find on GitHub.

I would be grateful for any help!

1 Like
2

I have solved the problem with this custom.css:


/* =================================================================== */
/*  JupyterLab 4.x  – настройка межстрочного интервала в кодовых ячейках
/*  Файл: ~/.jupyter/custom/custom.css
/* =================================================================== */


/* --- 0. Лёгкая проверка, что custom.css вообще подхватывается -------- */
/* Можно закомментировать, когда убедишься, что всё работает.            */

.jp-LabShell {
    /* слегка осветлим фон рабочей области */
    --jp-layout-color1: #fbfbfb;
}


/* =================================================================== */
/* 1. Межстрочное расстояние в КОДОВЫХ ячейках ноутбука (CodeMirror 6)  */
/* =================================================================== */

/*
   В JupyterLab 4.x редактор кода внутри ячейки – это CodeMirror 6.
   Его DOM выглядит примерно так:

   .jp-Notebook
     .jp-Cell.jp-CodeCell
       .jp-Cell-inputWrapper
         .jp-InputArea
           .jp-InputArea-editor  (контейнер редактора)
             .cm-editor
               .cm-scroller
                 .cm-content
                   .cm-line   ← ОТДЕЛЬНАЯ строка кода

   Поэтому трогаем именно .cm-line внутри .jp-Notebook .jp-InputArea-editor.
*/

/* Базовые настройки для редактора в ячейке (по желанию) */
.jp-Notebook .jp-InputArea-editor .cm-editor {
    /* если не нужно менять размер шрифта – просто закомментируй строку ниже */
    font-size: 13px;
}

/* ГЛАВНЫЙ селектор: меняем межстрочный интервал строк кода */
.jp-Notebook .jp-InputArea-editor .cm-editor .cm-line {
    line-height: 0.75 !important;  /* <— здесь крути плотность: 0.9, 1.0, 1.2 и т.п. */
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Немного уплотним саму входную область ячейки, чтобы всё выглядело консистентно */
.jp-Notebook .jp-Cell-inputWrapper {
    padding-top: 2px;
    padding-bottom: 2px;
}


/* =================================================================== */
/* 2. Fallback для классического Notebook / старого CodeMirror 5       */
/*    (на случай, если ты пользуешься ещё и классическим интерфейсом)  */
/* =================================================================== */

/*
   В старом интерфейсе и JupyterLab<3 использовались классы .CodeMirror и
   .CodeMirror-line. Эти правила не мешают JupyterLab 4, но помогут,
   если откроешь блокнот в классическом Notebook.
*/

div.CodeMirror pre.CodeMirror-line {
    line-height: 1.1 !important;
    padding-top: 0px;
    padding-bottom: 0px;
}
```
1 Like