1
Я использую CodeMirror для кодирования IDE, но вам нужно несколько экземпляров (т. Е. Каждая ячейка в Jupyter).Установите ширину желоба в CodeMirror
Я не знаю заранее, сколько экземпляров 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;
}
Очевидно, что если я «жёстко» СМЧ, он будет приведен в соответствие:
body .CodeMirror:nth-child(2) {
padding-left: 3px;
}
Но я не хочу, потому что я жёстко не знаю, положение каждого .CodeMirror.
Вопрос
Есть ли способ, чтобы установить ширину желоба таким образом, чтобы он автоматически оставляет достаточно мест на левом?
Если нет, я думал о том, чтобы перебирать все экземпляры CodeMirror и получать строку LineCount(). Затем «полуавтоматический» отрегулирует дополнение .CodeMirror с использованием jQuery для каждой из DOM. Это будет работать, но может быть медленным/накладным. Кроме того, на экране люди могут увидеть некоторые «прыжки» из-за повторной настройки после рендера (не очень хороший опыт).
Я рад любой альтернативе.
UPDATE 1
достаточно интересно, JSFiddle имеет то, что именно мне нужно в сроке регулировки желоба. Я смотрю на их код, и кажется, что шрифт номера строки меньше, а ширина больше. Таким образом, ширина для строк кода 1-99 такая же, как и 100-999 строк.
