HP. February 2016

Set gutter width in CodeMirror

I am using CodeMirror for a coding IDE but require multiple instances of it (i.e. each is a cell in Jupyter).

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.

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

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

enter image description here

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 plo        

Answers


HP. February 2016

I found the solution (which is right in front of me lolz):

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

Post Status

Asked in February 2016
Viewed 2,209 times
Voted 11
Answered 1 times

Search




Leave an answer