javascriptace-editor

Changing line height in ACE editor?


How do you change line height of ace editor?

enter image description here

Is there any API to do that? also increasing the line height should also increase the gutter height and cursor height as well, but from their documentation it seems missing.

Though i wrote this with no luck,

editor.setOptions({
    lineHeight: "40px"
});

I did some CSS hack, but again it breaks the editor layout

div.ace_gutter-cell, div.ace_line {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 20px !important; 
    /* border: 1px solid #ccc; */
}

Solution

  • You can use

    editor.container.style.lineHeight = 2
    editor.renderer.updateFontSize()
    

    similar to what fontSize option does https://github.com/ajaxorg/ace/blob/v1.2.3/lib/ace/virtual_renderer.js#L1703-L1710