diff --git a/src/components/ContentParserFactory.js b/src/components/ContentParserFactory.js
index fe16336..e03d579 100644
--- a/src/components/ContentParserFactory.js
+++ b/src/components/ContentParserFactory.js
@@ -1,9 +1,11 @@
-import { MarkdownParser } from './plugin/MarkdownParser'
+import MarkdownIt from 'markdown-it'
 
 function contentParserFactory (parsers) {
-    return content => {
-        return MarkdownParser(content, parsers)
-    }
+    let converter = MarkdownIt()
+    parsers.forEach(parser => {
+        converter = converter.use(parser)
+    })
+    return content => converter.render(content)
 }
 
 export { contentParserFactory }
diff --git a/src/components/DefaultConfig.js b/src/components/DefaultConfig.js
index 84895d2..8d3b0e9 100644
--- a/src/components/DefaultConfig.js
+++ b/src/components/DefaultConfig.js
@@ -27,7 +27,8 @@ export const defaultConfig = {
         mode: 'markdown',
         lineNumbers: true,
         lineWrapping: true
-    }
+    },
+    scrollSync: true
 }
 
 export function getConfig (config) {
diff --git a/src/components/InputArea.vue b/src/components/InputArea.vue
index 9082256..9a16417 100644
--- a/src/components/InputArea.vue
+++ b/src/components/InputArea.vue
@@ -32,6 +32,7 @@
 <script>
 import {codemirror} from 'vue-codemirror-lite'
 import 'codemirror/mode/markdown/markdown.js'
+import _ from 'lodash'
 
 export default {
     name: 'input-area',
@@ -44,6 +45,9 @@ export default {
         },
         insertCode: {
             default: null
+        },
+        scrollSync: {
+            type: Boolean
         }
     },
     computed: {
@@ -80,7 +84,9 @@ export default {
     },
     data: function () {
         return {
-            code: ''
+            code: '',
+            scrollSynced: false,
+            scrollAnimation: null
         }
     },
     components: {
@@ -88,11 +94,94 @@ export default {
     },
     mounted: function () {
         this.code = this.value
+
+        const debouncedEmitScrollSync = _.debounce(this.emitScrollSync, 50, { maxWait: 50 })
+        const scrollSync = () => {
+            if (this.scrollSynced) {
+                this.scrollSynced = false
+            } else {
+                debouncedEmitScrollSync()
+                if (this.scrollAnimation) {
+                    this.scrollAnimation.cancel()
+                }
+            }
+        }
+        this.editor.on('cursorActivity', scrollSync)
+        this.editor.on('scroll', scrollSync)
     },
     methods: {
         updateCode (code) {
             this.$emit('input', code)
+        },
+
+        emitScrollSync () {
+            if (!this.scrollSync) return
+            const cursorLine = this.editor.getCursor().line
+            const scrollInfo = this.editor.getScrollInfo('local')
+            const viewport = {
+                from: this.editor.lineAtHeight(scrollInfo.top, 'local'),
+                to: this.editor.lineAtHeight(scrollInfo.top + scrollInfo.clientHeight, 'local') + 1
+            }
+            const linesOffset = []
+            for (let line = viewport.from; line < viewport.to; ++line) {
+                const coords = this.editor.cursorCoords({ line, ch: 0 }, 'local')
+                linesOffset[line] = {
+                    top: coords.top - scrollInfo.top,
+                    bottom: coords.bottom - scrollInfo.top
+                }
+            }
+            const event = {
+                cursorLine, scrollInfo, viewport, linesOffset
+            }
+            this.$emit('scroll-sync', event)
+        },
+        updateScrollSync ({ scrollInfo, linesOffset }) {
+            if (!linesOffset.length) {
+                return
+            }
+            const scrollMid = scrollInfo.height / 2
+            let syncLine
+            linesOffset.forEach(({ top }, line) => {
+                if (typeof syncLine === 'undefined' || Math.abs(top - scrollMid) < Math.abs(linesOffset[syncLine].top - scrollMid)) {
+                    syncLine = line
+                }
+            })
+            const scrollTop = this.editor.getScrollInfo().top
+            const editorLineOffset = this.editor.heightAtLine(syncLine, 'local') - scrollTop
+            if (this.scrollAnimation) {
+                this.scrollAnimation.cancel()
+            }
+            let animationCancelled = false
+            let animationSkipFrame = false
+            const animationFrom = scrollTop
+            const animationTo = scrollTop + editorLineOffset - linesOffset[syncLine].top
+            const animationStartTime = Date.now()
+            const animationDuration = 200
+            const animationFrameCallback = () => {
+                if (animationSkipFrame) {
+                    // skip frame so that user can scroll to interrupt animation
+                    requestAnimationFrame(animationFrameCallback)
+                    animationSkipFrame = false
+                } else if (!animationCancelled) {
+                    const currentTime = Date.now()
+                    const precent = (currentTime - animationStartTime) / animationDuration
+                    this.scrollSynced = true
+                    if (precent >= 1) {
+                        this.editor.scrollTo(null, animationTo)
+                    } else {
+                        this.editor.scrollTo(null, (animationTo - animationFrom) * precent + animationFrom)
+                        requestAnimationFrame(animationFrameCallback)
+                        animationSkipFrame = true
+                    }
+                }
+            }
+            animationFrameCallback()
+            this.scrollAnimation = {
+                cancel () {
+                    animationCancelled = true
+                }
+            }
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/MarkdownPalettes.vue b/src/components/MarkdownPalettes.vue
index 1e74f19..5468f82 100644
--- a/src/components/MarkdownPalettes.vue
+++ b/src/components/MarkdownPalettes.vue
@@ -13,14 +13,18 @@
                             ref="inputArea"
                             @input="updateCode"
                             @finish="insertCode = null"
+                            @scroll-sync="doScrollSync('editor', $event)"
                             :insertCode="insertCode"
-                            :editorOption="editorConfig.editorOption"></input-area>
+                            :editorOption="editorConfig.editorOption"
+                            :scrollSync="scrollSync"></input-area>
             </div>
             <div id="mp-editor-preview-area" class="mp-editor-area mp-preview-area" :class="{
                         'mp-editor-area': this.config.previewDisplay === 'normal',
                         'mp-editor-area-hide': this.config.previewDisplay === 'hide'
                 }">
-                <preview-area v-model="code" :parser="contentParser" ref="previewArea"></preview-area>
+                <preview-area v-model="code" :parser="contentParser" ref="previewArea"
+                              @scroll-sync="doScrollSync('preview', $event)"
+                              :scrollSync="scrollSync"></preview-area>
             </div>
         </div>
         <div id="mp-editor-dialog">
@@ -89,6 +93,7 @@ import EditorDialog from './Dialog.vue'
 
 import { defaultConfig, getConfig } from './DefaultConfig'
 import { contentParserFactory } from './ContentParserFactory'
+import InjectLnParser from './plugins/InjectLnParser.js'
 
 export default {
     name: 'markdown-palettes',
@@ -113,7 +118,8 @@ export default {
             editorConfig: config,
             editorHeight: '500px',
             fullScreen: config.fullScreen,
-            contentParser: contentParserFactory(config.parsers)
+            contentParser: contentParserFactory([...config.parsers, InjectLnParser]),
+            scrollSync: config.scrollSync
         }
     },
     mounted () {
@@ -159,6 +165,16 @@ export default {
                     this.fullScreen = false
                 }
             }
+            if (operation === 'scrollSync') {
+                this.scrollSync = !this.scrollSync
+            }
+        },
+        doScrollSync (emitter, info) {
+            if (emitter === 'editor') {
+                this.$refs.previewArea.updateScrollSync(info)
+            } else if (emitter === 'preview') {
+                this.$refs.inputArea.updateScrollSync(info)
+            }
         }
     },
     watch: {
@@ -168,4 +184,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/PreviewArea.vue b/src/components/PreviewArea.vue
index b7bcecb..d5b7070 100644
--- a/src/components/PreviewArea.vue
+++ b/src/components/PreviewArea.vue
@@ -1,6 +1,6 @@
 <template>
-    <div id="mp-preview-area">
-        <div id="mp-preview-content" v-html="content"></div>
+    <div id="mp-preview-area" ref="previewArea" @scroll="previewAreaScroll">
+        <div id="mp-preview-content" v-html="content" ref="previewContent"></div>
     </div>
 </template>
 
@@ -80,6 +80,8 @@
 </style>
 
 <script>
+import _ from 'lodash'
+
 export default {
     name: 'preview-area',
     props: {
@@ -92,25 +94,169 @@ export default {
         },
         height: {
             type: String
+        },
+        scrollSync: {
+            type: Boolean
         }
     },
     data () {
         return {
-            content: ''
+            content: '',
+            linesBounding: [],
+            scrollSynced: false
         }
     },
+    created () {
+        this.debouncedEmitScrollSync = _.debounce(this.emitScrollSync, 100, { maxWait: 100 })
+    },
     mounted () {
         this.updateContent(this.value)
     },
     methods: {
         updateContent (newContent) {
             this.content = this.parser(newContent)
+            if (this.scrollSync) {
+                this.$nextTick(this.maintainLinesBounding)
+            } else {
+                this.linesBounding = []
+            }
+        },
+        maintainLinesBounding () {
+            this.updateLinesBounding()
+            const previewArea = this.$refs.previewArea
+            Array.from(previewArea.getElementsByTagName('img')).forEach(img => {
+                // img will become "bigger" when it's loaded
+                img.addEventListener('load', this.updateLinesBounding)
+            })
+        },
+        updateLinesBounding () {
+            const previewArea = this.$refs.previewArea
+            const previewContent = this.$refs.previewContent
+            const outerTop = previewContent.getBoundingClientRect().top
+            this.linesBounding = []
+            previewArea.querySelectorAll('[data-line]').forEach(lineE => {
+                const bounding = lineE.getBoundingClientRect()
+                const line = parseInt(lineE.dataset.line)
+                this.linesBounding.push({
+                    line,
+                    top: bounding.top - outerTop,
+                    bottom: bounding.bottom - outerTop
+                })
+            })
+            _.sortBy(this.linesBounding, [b => b.top])
+        },
+        previewAreaScroll () {
+            if (this.scrollSynced) {
+                this.scrollSynced = false
+            } else {
+                this.debouncedEmitScrollSync()
+            }
+        },
+        emitScrollSync () {
+            if (!this.scrollSync) return
+            const previewArea = this.$refs.previewArea
+            const scrollTop = previewArea.scrollTop
+            const scrollBottom = scrollTop + previewArea.getBoundingClientRect().height
+            const lowerLinePos = _.sortedIndexBy(this.linesBounding, { top: scrollTop }, b => b.top)
+            const upperLinePos = _.sortedIndexBy(this.linesBounding, { top: scrollBottom }, b => b.top)
+            const linesOffset = []
+            for (let linePos = lowerLinePos; linePos < upperLinePos; ++linePos) {
+                const line = this.linesBounding[linePos].line
+                linesOffset[line] = {
+                    top: this.linesBounding[linePos].top - scrollTop,
+                    bottom: this.linesBounding[linePos].bottom - scrollTop
+                }
+            }
+            this.$emit('scroll-sync', {
+                scrollInfo: {
+                    top: scrollTop,
+                    bottom: scrollBottom,
+                    height: scrollBottom - scrollTop
+                },
+                linesOffset: linesOffset
+            })
+        },
+        updateScrollSync ({ cursorLine, scrollInfo, viewport, linesOffset }) {
+            const previewArea = this.$refs.previewArea
+            const offset = ele => {
+                const eleRect = ele.getBoundingClientRect()
+                const araRect = previewArea.getBoundingClientRect()
+                return {
+                    top: eleRect.top - araRect.top,
+                    bottom: eleRect.bottom - araRect.top
+                }
+            }
+            const getLine = line => previewArea.querySelector(`[data-line="${line}"]`)
+            const calcScroll = line => {
+                const lineE = getLine(line)
+                const previewLineOffset = offset(lineE)
+                const editorLineOffset = linesOffset[line]
+                if (typeof editorLineOffset === 'undefined') {
+                    return NaN
+                }
+                let scroll = previewLineOffset.top - editorLineOffset.top
+                const tagName = lineE.tagName
+                if (/^h\d$/i.test(tagName)) {
+                    scroll = previewLineOffset.bottom - editorLineOffset.bottom
+                }
+                if (previewLineOffset.top - scroll < 0) {
+                    scroll = -previewLineOffset.top
+                }
+                return scroll
+            }
+
+            const syncLine = _.inRange(cursorLine, viewport.from, viewport.to) ? cursorLine : Math.round((viewport.from + viewport.to) / 2)
+            let lowerLine, upperLine
+            for (lowerLine = syncLine; lowerLine >= viewport.from; --lowerLine) {
+                if (getLine(lowerLine) !== null) {
+                    break
+                }
+            }
+            for (upperLine = syncLine; upperLine < viewport.to; ++upperLine) {
+                if (getLine(upperLine) !== null) {
+                    break
+                }
+            }
+            const lowerLineE = getLine(lowerLine)
+            const upperLineE = getLine(upperLine)
+            const hasLowerLine = lowerLineE !== null
+            const hasUpperLine = upperLineE !== null
+            if (!hasLowerLine && !hasUpperLine) {
+                // can't sync
+                return
+            }
+            let chosenLine
+            if (!hasLowerLine) {
+                chosenLine = upperLine
+            } else if (!hasUpperLine) {
+                chosenLine = lowerLine
+            } else if (lowerLine === upperLine) {
+                chosenLine = lowerLine
+            } else {
+                const lowerScroll = calcScroll(lowerLine)
+                const upperScroll = calcScroll(upperLine)
+                if (Math.abs(lowerScroll) < Math.abs(upperScroll) || isNaN(upperScroll)) {
+                    chosenLine = lowerLine
+                } else {
+                    chosenLine = upperLine
+                }
+            }
+            const scroll = calcScroll(chosenLine)
+            if (!isNaN(scroll)) {
+                this.scrollSynced = true
+                previewArea.scrollTop += scroll
+            }
         }
     },
     watch: {
         value (newContent) {
             this.updateContent(newContent)
+        },
+        scrollSync (val) {
+            if (val && this.linesBounding.length === 0) {
+                this.maintainLinesBounding()
+            }
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/plugin/MarkdownParser.js b/src/components/plugin/MarkdownParser.js
deleted file mode 100644
index 77f5e99..0000000
--- a/src/components/plugin/MarkdownParser.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import MarkdownIt from 'markdown-it'
-
-export function MarkdownParser (code, parsers) {
-    let converter = MarkdownIt()
-    parsers.forEach(parser => {
-        converter = converter.use(parser)
-    })
-    return converter.render(code)
-}
diff --git a/src/components/plugins/InjectLnParser.js b/src/components/plugins/InjectLnParser.js
new file mode 100644
index 0000000..859c91b
--- /dev/null
+++ b/src/components/plugins/InjectLnParser.js
@@ -0,0 +1,37 @@
+/*
+Copyright (c) 2014 Vitaly Puzrin, Alex Kocharin.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+export default mdHtml => {
+    function injectLineNumbers (tokens, idx, options, env, slf) {
+        let line
+        if (tokens[idx].map && tokens[idx].level === 0) {
+            line = tokens[idx].map[0]
+            tokens[idx].attrSet('data-line', String(line))
+        }
+        return slf.renderToken(tokens, idx, options, env, slf)
+    }
+
+    mdHtml.renderer.rules.paragraph_open = mdHtml.renderer.rules.heading_open = injectLineNumbers
+}
diff --git a/src/components/toolbar-button/btn-scrollsync.js b/src/components/toolbar-button/btn-scrollsync.js
new file mode 100644
index 0000000..85f13e2
--- /dev/null
+++ b/src/components/toolbar-button/btn-scrollsync.js
@@ -0,0 +1,8 @@
+export default {
+    name: 'scrollSync',
+    icon: 'fa-unlock-alt',
+    title: '同步滚动',
+    action: {
+        event: 'scrollSync'
+    }
+}
diff --git a/src/components/toolbar-button/toolbarBtn.js b/src/components/toolbar-button/toolbarBtn.js
index 11453af..e14b341 100644
--- a/src/components/toolbar-button/toolbarBtn.js
+++ b/src/components/toolbar-button/toolbarBtn.js
@@ -12,6 +12,7 @@ import BtnHr from './btn-hr'
 import BtnCode from './btn-code'
 import BtnHide from './btn-hide'
 import BtnFullscreen from './btn-fullscreen'
+import BtnScrollsync from './btn-scrollsync'
 import BtnInfo from './btn-info'
 
 export const defaultBtns = [
@@ -37,6 +38,7 @@ export const defaultBtns = [
     Divider,
     BtnHide,
     BtnFullscreen,
+    BtnScrollsync,
     Divider,
     BtnInfo
 ]