CodeMirror - Is it possible to scroll to a line so that it is in the middle of window?

javascript jquery codemirror
Martin Vseticka picture Martin Vseticka · May 13, 2012 · Viewed 10.6k times · Source

I'm highlighting lines of HTML code in CodeMirror and I want to add an anchor that scroll CodeMirror editor to a given line.

I can scroll to a line X via setCursor method. But I would like to have the line X in the middle of CodeMirror window. Can I do that? I studied the API and demos but with no luck.

Thanks!

Answer

Eric Grivilers picture Eric Grivilers · May 9, 2014

This one should work:

var editor = CodeMirror.fromTextArea(...);

function jumpToLine(i) { 
    var t = editor.charCoords({line: i, ch: 0}, "local").top; 
    var middleHeight = editor.getScrollerElement().offsetHeight / 2; 
    editor.scrollTo(null, t - middleHeight - 5); 
}

Related questions

When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

The App: I have a textarea element in my page. It is transformed using CodeMirror, because I need to indent and highlight html code withing it. Pic is in the link: [textarea using codemirror] http://uploadingit.com/file/gxftd2cps9…

Read More
Codemirror editor is not loading content until clicked

I am using codemirror 2 and its working fine except that the editor's set value doesn't load into the editor until I click the editor and it becomes focused. I want the editor to show the content of itself without it …

Read More
Codemirror Auto Format after setValue

http://liveweave.com/UxEJ0s I'm using Codemirror for my app. I noticed if I select all the text and press SHIFT+Tab it will auto align my code making it easier to read. Here's an example of what my …

Read More