javascript - 在 CodeMirror 中设置 gutter 宽度

Question

我将 CodeMirror 用于编码 IDE，但需要它的多个实例(即每个实例都是 Jupyter 中的一个单元格)。

我事先不知道会有多少 CodeMirror 实例。我试图做的是让它们看起来“无缝”，对齐的装订线和连续的行号。

但是，由于某些 CodeMirror 实例的行数少于 100 行，因此我遇到了间距宽度的问题。见下方箭头

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

显然，如果我“硬编码”CSS，它就会对齐:

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

但是我不想硬编码，因为我不知道每个.CodeMirror的位置。

问题

有没有办法设置gutter的宽度，让它自动在左边留出足够的空间？

如果没有，我正在考虑遍历所有 CodeMirror 实例并获取 lineCount()。然后“半自动”使用 jQuery 为每个 DOM 调整 .CodeMirror 的填充。这会起作用，但可能会很慢/开销。另外在屏幕中，由于渲染后重新调整，人们可能会看到一些“跳跃”(不是很好的体验)。

我欢迎任何替代方案。

更新 1

有趣的是，JSFiddle 在装订线调整方面有我所需要的。我看他们的代码好像行号字体小了，宽度大了。因此代码 1-99 行的宽度与 100-999 行的宽度相同。

Answer 1

我找到了解决方案(就在我面前 lolz):

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