[英]Set gutter width in CodeMirror
我將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的位置。
題
有沒有一種方法可以設置裝訂線槽的寬度，使其自動在左側留出足夠的空間？
如果沒有，我正在考慮遍歷所有CodeMirror實例並獲取lineCount（）。 然后“半自動”使用jQuery為每個DOM調整.CodeMirror的填充。 這可以工作，但是可能很慢/開銷。 另外，在屏幕上，由於渲染后的重新調整，人們可能會看到一些“跳躍”（不是很好的體驗）。
我歡迎有其他選擇。
更新1
有趣的是，JSFiddle在裝訂線調整方面確實需要我。 我看了看他們的代碼，看來行號字體較小，寬度較大。 因此，代碼1-99行的寬度與100-999行相同。
我找到了解決方法（就在我面前，哈哈）
.CodeMirror-linenumber {
padding: 1px 8px 0 5px;
color: #c8d2d7;
font-size: 10px;
}
CodeMirror javascript Gutter line Number padding
[英]CodeMirror javascript Gutter line Number padding
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.