javascript - Set gutter width in CodeMirror -

i using codemirror coding ide require multiple instances of (i.e. each cell in jupyter).

i don't know ahead of time how many instances of codemirror going there. try make them "seamless" gutter aligned , line number continuous.

however run problem gutter width since codemirror instance has less 100 lines. see below arrow

http://jsfiddle.net/qhoc/tzvss/386/

html

<textarea class="code1"> function inline() {      alert('inline code')  } </textarea>  <textarea class="code2">function test() {      return false; } function test1() {      return false; } function test2() {      return false; } function test3() {      return false; } import plotly.plotly py import plotly.graph_objs go  # create random data numpy import numpy np  n = 500  # create 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 py import plotly.graph_objs 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<br>population: 40301927.0',            'country: bolivia<br>population: 9119152.0',            'country: brazil<br>population: 190010647.0',            'country: canada<br>population: 33390141.0',            'country: chile<br>population: 16284741.0',            'country: colombia<br>population: 44227550.0',            'country: costa rica<br>population: 4133884.0',            'country: cuba<br>population: 11416987.0',            'country: dominican republic<br>population: 9319622.0',            'country: ecuador<br>population: 13755680.0',            'country: el salvador<br>population: 6939688.0',            'country: guatemala<br>population: 12572928.0',            'country: haiti<br>population: 8502814.0',            'country: honduras<br>population: 7483763.0',            'country: jamaica<br>population: 2780132.0',            'country: mexico<br>population: 108700891.0',            'country: nicaragua<br>population: 5675356.0',            'country: panama<br>population: 3242173.0',            'country: paraguay<br>population: 6667147.0',            'country: peru<br>population: 28674757.0',            'country: puerto rico<br>population: 3942491.0',            'country: trinidad , tobago<br>population: 1056608.0',            'country: united states<br>population: 301139947.0',            'country: uruguay<br>population: 3447496.0',            'country: venezuela<br>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<br>population: 3600523.0',            'country: austria<br>population: 8199783.0',            'country: belgium<br>population: 10392226.0',            'country: bosnia , herzegovina<br>population: 4552198.0',            'country: bulgaria<br>population: 7322858.0',            'country: croatia<br>population: 4493312.0',            'country: czech republic<br>population: 10228744.0',            'country: denmark<br>population: 5468120.0',            'country: finland<br>population: 5238460.0',            'country: france<br>population: 61083916.0',            'country: germany<br>population: 82400996.0',            'country: greece<br>population: 10706290.0',            'country: hungary<br>population: 9956108.0',            'country: iceland<br>population: 301931.0',            'country: ireland<br>population: 4109086.0',            'country: italy<br>population: 58147733.0',            'country: montenegro<br>population: 684736.0',            'country: netherlands<br>population: 16570613.0',            'country: norway<br>population: 4627926.0',            'country: poland<br>population: 38518241.0',            'country: portugal<br>population: 10642836.0',            'country: romania<br>population: 22276056.0',            'country: serbia<br>population: 10150265.0',            'country: slovak republic<br>population: 5447502.0',            'country: slovenia<br>population: 2009245.0',            'country: spain<br>population: 40448191.0',            'country: sweden<br>population: 9031088.0',            'country: switzerland<br>population: 7554661.0',            'country: turkey<br>population: 71158647.0',            'country: united kingdom<br>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')  </textarea> 

js

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); }); 

css

.codemirror {     height: auto!important;    } 

obviously if "hardcode" css, aligned:

body .codemirror:nth-child(2) {   padding-left: 3px; } 

but don't want hardcode because don't know position of each .codemirror.

question

is there way set width of gutter automatically leaves enough space on left?

if not, thinking looping through of codemirror instances , linecount(). "semi-automatic" adjust padding of .codemirror using jquery each of dom. work slow / overhead. plus in screen, people may see "jumping" due re-adjustment after render (not experience).

i welcome alternative.

update 1

interesting enough, jsfiddle has need in term of gutter adjustment. @ code , seems line number font smaller , width larger. width code 1-99 lines same 100-999 lines.

i found solution (which right in front of me lolz):

.codemirror-linenumber {     padding: 1px 8px 0 5px;     color: #c8d2d7;     font-size: 10px; }