自動的にスクロールを合わせてくれる

lib/components/CodeEditor.js

@@ -30,6 +30,7 @@ module.exports = React.createClass({
     editor.renderer.setShowGutter(true)
     editor.setTheme('ace/theme/xcode')
     editor.clearSelection()
+    editor.moveCursorTo(0, 0)
 
     editor.setReadOnly(!!this.props.readOnly)
 
@@ -50,16 +51,14 @@ module.exports = React.createClass({
         this.props.onChange(e, value)
       }
     }.bind(this))
-
-    this.setState({editor: editor})
   },
   componentDidUpdate: function (prevProps) {
-    if (this.state.editor.getValue() !== this.props.code) {
-      this.state.editor.setValue(this.props.code)
-      this.state.editor.clearSelection()
+    if (this.editor.getValue() !== this.props.code) {
+      this.editor.setValue(this.props.code)
+      this.editor.clearSelection()
     }
     if (prevProps.mode !== this.props.mode) {
-      var session = this.state.editor.getSession()
+      var session = this.editor.getSession()
       let mode = _.findWhere(modes, {name: this.props.mode})
       let syntaxMode = mode != null
         ? mode.mode
@@ -67,6 +66,18 @@ module.exports = React.createClass({
       session.setMode('ace/mode/' + syntaxMode)
     }
   },
+  getFirstVisibleRow: function () {
+    return this.editor.getFirstVisibleRow()
+  },
+  getCursorPosition: function () {
+    return this.editor.getCursorPosition()
+  },
+  moveCursorTo: function (row, col) {
+    this.editor.moveCursorTo(row, col)
+  },
+  scrollToLine: function (num) {
+    this.editor.scrollToLine(num, false, false)
+  },
   render: function () {
     return (
       <div ref='target' className={this.props.className == null ? 'CodeEditor' : 'CodeEditor ' + this.props.className}></div>

lib/markdown.js

@@ -8,20 +8,31 @@ var md = markdownit({
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return hljs.highlight(lang, str).value;
+        return hljs.highlight(lang, str).value
       } catch (__) {}
     }
 
     try {
-      return hljs.highlightAuto(str).value;
+      return hljs.highlightAuto(str).value
     } catch (__) {}
 
-    return ''; // use external default escaping
+    return ''
   }
 })
 md.use(emoji)
 
+let originalRenderToken = md.renderer.renderToken
+md.renderer.renderToken = function renderToken (tokens, idx, options) {
+  let token = tokens[idx]
+  let result = originalRenderToken.call(md.renderer, tokens, idx, options)
+  if (token.map != null) {
+    return result + '<a class=\'lineAnchor\' data-key=\'' + token.map[0] + '\'></a>'
+  }
+  return result
+}
+
 export default function markdown (content) {
   if (content == null) content = ''
+
   return md.render(content.toString())
 }