Set gutter width in CodeMirror
<p>I am using CodeMirror for a coding IDE but require multiple instances of it (i.e. each is a cell in Jupyter).</p>

<p>I don't know ahead of time how many instances of CodeMirror is going to be there. What I try to do is to make them look "seamless" with the gutter aligned and the line number is continuous. </p>

<p>However I run into this problem with gutter width since some CodeMirror instance has less than 100 lines. See below arrow  </p>

<p><a href="http://jsfiddle.net/qhoc/tZVsS/386/" rel="nofollow noreferrer">http://jsfiddle.net/qhoc/tZVsS/386/</a></p>

<p><a href="https://i.stack.imgur.com/vaOjb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vaOjb.png" alt="enter image description here"></a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;textarea class="code1"&gt;
function inline() { 
    alert('inline code') 
}
&lt;/textarea&gt;

&lt;textarea class="code2"&gt;function test() { 
    return false;
}
function test1() { 
    return false;
}
function test2() { 
    return false;
}
function test3() { 
    return false;
}
import plotly.plotly as py
import plotly.graph_objs as go

# Create random data with numpy
import numpy as np

N = 500

# Create a trace
trace0 = go.Scatter(
    x = np.random.randn(N),
    y = np.random.randn(N)+2,
    name = 'Above',
    mode = 'markers',
    marker = dict(
        size = 10,
        color = 'rgba(152, 0, 0, .8)',
        line = dict(
            width = 2,
            color = 'rgb(0, 0, 0)'
        )
    )
)

trace1 = go.Scatter(
    x = np.random.randn(N),
    y = np.random.randn(N)-2,
    name = 'Below',
    mode = 'markers',
    marker = dict(
        size = 10,
        color = 'rgba(255, 182, 193, .9)',
        line = dict(
            width = 2,
        )
    )
)

data = [trace0, trace1]

layout = dict(title = 'Styled Scatter',
              yaxis = dict(zeroline = False),
              xaxis = dict(zeroline = False)
             )

fig = dict(data=data, layout=layout)
py.iplot(fig, filename='styled-scatter')

import plotly.plotly as py
import plotly.graph_objs as go

trace0 = go.Scatter(
    x=[12779.379640000001, 3822.1370840000004, 9065.800825, 36319.235010000004,
       13171.63885, 7006.580419, 9645.06142, 8948.102923, 6025.374752000001,
       6873.262326000001, 5728.353514, 5186.050003, 1201.637154,
       3548.3308460000003, 7320.880262000001, 11977.57496, 2749.320965,
       9809.185636, 4172.838464, 7408.905561, 19328.70901, 18008.50924,
       42951.65309, 10611.46299, 11415.805690000001],
    y=[75.32, 65.554, 72.39, 80.653, 78.553, 72.889, 78.782, 78.273, 72.235,
       74.994, 71.878, 70.259, 60.916000000000004, 70.19800000000001, 72.567,
       76.195, 72.899, 75.53699999999999, 71.752, 71.421, 78.74600000000001,
       69.819, 78.242, 76.384, 73.747],
    mode='markers',
    marker=dict(size=12,
                line=dict(width=1)
               ),
    name='Americas',
    text=['Country: Argentina&lt;br&gt;Population: 40301927.0', 
          'Country: Bolivia&lt;br&gt;Population: 9119152.0', 
          'Country: Brazil&lt;br&gt;Population: 190010647.0', 
          'Country: Canada&lt;br&gt;Population: 33390141.0', 
          'Country: Chile&lt;br&gt;Population: 16284741.0', 
          'Country: Colombia&lt;br&gt;Population: 44227550.0', 
          'Country: Costa Rica&lt;br&gt;Population: 4133884.0', 
          'Country: Cuba&lt;br&gt;Population: 11416987.0', 
          'Country: Dominican Republic&lt;br&gt;Population: 9319622.0', 
          'Country: Ecuador&lt;br&gt;Population: 13755680.0', 
          'Country: El Salvador&lt;br&gt;Population: 6939688.0', 
          'Country: Guatemala&lt;br&gt;Population: 12572928.0', 
          'Country: Haiti&lt;br&gt;Population: 8502814.0', 
          'Country: Honduras&lt;br&gt;Population: 7483763.0', 
          'Country: Jamaica&lt;br&gt;Population: 2780132.0', 
          'Country: Mexico&lt;br&gt;Population: 108700891.0', 
          'Country: Nicaragua&lt;br&gt;Population: 5675356.0', 
          'Country: Panama&lt;br&gt;Population: 3242173.0', 
          'Country: Paraguay&lt;br&gt;Population: 6667147.0', 
          'Country: Peru&lt;br&gt;Population: 28674757.0', 
          'Country: Puerto Rico&lt;br&gt;Population: 3942491.0', 
          'Country: Trinidad and Tobago&lt;br&gt;Population: 1056608.0', 
          'Country: United States&lt;br&gt;Population: 301139947.0', 
          'Country: Uruguay&lt;br&gt;Population: 3447496.0', 
          'Country: Venezuela&lt;br&gt;Population: 26084662.0'],
    )

trace1 = go.Scatter(
    x=[5937.029525999999, 36126.4927, 33692.60508, 7446.298803, 10680.79282,
       14619.222719999998, 22833.30851, 35278.41874, 33207.0844, 30470.0167,
       32170.37442, 27538.41188, 18008.94444, 36180.789189999996, 40675.99635,
       28569.7197, 9253.896111, 36797.93332, 49357.19017, 15389.924680000002,
       20509.64777, 10808.47561, 9786.534714, 18678.31435, 25768.25759,
       28821.0637, 33859.74835, 37506.419069999996, 8458.276384, 33203.26128],
    y=[76.423, 79.829, 79.441, 74.852, 73.005, 75.748, 76.486, 78.332, 79.313,
       80.657, 79.406, 79.483, 73.33800000000001, 81.757, 78.885, 80.546,
       74.543, 79.762, 80.196, 75.563, 78.098, 72.476, 74.002, 74.663, 77.926,
       80.941, 80.884, 81.70100000000001, 71.777, 79.425],
    mode='markers',
    marker=dict(size=12,
                line=dict(width=1)
               ),
    name='Europe',
    text=['Country: Albania&lt;br&gt;Population: 3600523.0', 
          'Country: Austria&lt;br&gt;Population: 8199783.0', 
          'Country: Belgium&lt;br&gt;Population: 10392226.0', 
          'Country: Bosnia and Herzegovina&lt;br&gt;Population: 4552198.0', 
          'Country: Bulgaria&lt;br&gt;Population: 7322858.0', 
          'Country: Croatia&lt;br&gt;Population: 4493312.0', 
          'Country: Czech Republic&lt;br&gt;Population: 10228744.0', 
          'Country: Denmark&lt;br&gt;Population: 5468120.0', 
          'Country: Finland&lt;br&gt;Population: 5238460.0', 
          'Country: France&lt;br&gt;Population: 61083916.0', 
          'Country: Germany&lt;br&gt;Population: 82400996.0', 
          'Country: Greece&lt;br&gt;Population: 10706290.0', 
          'Country: Hungary&lt;br&gt;Population: 9956108.0', 
          'Country: Iceland&lt;br&gt;Population: 301931.0', 
          'Country: Ireland&lt;br&gt;Population: 4109086.0', 
          'Country: Italy&lt;br&gt;Population: 58147733.0', 
          'Country: Montenegro&lt;br&gt;Population: 684736.0', 
          'Country: Netherlands&lt;br&gt;Population: 16570613.0', 
          'Country: Norway&lt;br&gt;Population: 4627926.0', 
          'Country: Poland&lt;br&gt;Population: 38518241.0', 
          'Country: Portugal&lt;br&gt;Population: 10642836.0', 
          'Country: Romania&lt;br&gt;Population: 22276056.0', 
          'Country: Serbia&lt;br&gt;Population: 10150265.0', 
          'Country: Slovak Republic&lt;br&gt;Population: 5447502.0', 
          'Country: Slovenia&lt;br&gt;Population: 2009245.0', 
          'Country: Spain&lt;br&gt;Population: 40448191.0', 
          'Country: Sweden&lt;br&gt;Population: 9031088.0', 
          'Country: Switzerland&lt;br&gt;Population: 7554661.0', 
          'Country: Turkey&lt;br&gt;Population: 71158647.0', 
          'Country: United Kingdom&lt;br&gt;Population: 60776238.0'],
        )

data = [trace0, trace1]
layout = go.Layout(
    title='Life Expectancy v. Per Capita GDP, 2007',
    hovermode='closest',
    xaxis=dict(
        title='GDP per capita (2000 dollars)',
        ticklen=5,
        zeroline=False,
        gridwidth=2,
    ),
    yaxis=dict(
        title='Life Expectancy (years)',
        ticklen=5,
        gridwidth=2,
    ),
)
fig = go.Figure(data=data, layout=layout)
py.iplot(fig, filename='life-expectancy-per-GDP-2007')

&lt;/textarea&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>var lineNumbers = [];

var code1 = CodeMirror.fromTextArea(document.getElementsByClassName('code1')[0], {
        value: document.getElementsByClassName('code1')[0].innerHTML,
    mode: 'javascript',
    styleActiveLine: true,
    lineNumbers: true
});

var code2 = CodeMirror.fromTextArea(document.getElementsByClassName('code2')[0], {
        value: document.getElementsByClassName('code2')[0].innerHTML,
    mode: 'javascript',
    styleActiveLine: true,
    firstLineNumber: code1.getDoc().lineCount() + 1,
    lineNumbers: true
});

code1.on('changes', function(e) {
    console.log('New line number: ' + e.getDoc().lineCount()+1);
  code2.setOption('firstLineNumber', e.getDoc().lineCount()+1);
});
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.CodeMirror {
    height: auto!important;   
}
</code></pre>

<p>Obviously if I "hardcode" the CSS, it would be aligned:</p>

<pre><code>body .CodeMirror:nth-child(2) {
  padding-left: 3px;
}
</code></pre>

<p>But I don't want to hardcode because I don't know the position of each <code>.CodeMirror</code>. </p>

<p><strong>Question</strong></p>

<p>Is there a way to set the width of gutter so that it automatically leaves enough space on the left?</p>

<p>If not, I was thinking about looping through all of CodeMirror instances and get the lineCount(). Then "semi-automatic" adjust the padding of <code>.CodeMirror</code> using jQuery for each of the DOM. This would work but could be slow / overhead. Plus in the screen, people may see some "jumping" due to re-adjustment after render (not a good experience). </p>

<p>I am welcome any alternative.</p>

<p><strong>UPDATE 1</strong></p>

<p>Interesting enough, JSFiddle has what exactly I need in term of the gutter adjustment. I look at their code and it seems that the line number font is smaller and the width is larger. So the width for code 1-99 lines is the same as 100-999 lines.</p>

<p><a href="https://i.stack.imgur.com/iH6Td.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iH6Td.png" alt="enter image description here"></a></p>