Merge branch 'master'

Conflicts:
	package.json

browser/components/MarkdownPreview.js

@@ -21,7 +21,7 @@ const sanitizeOpts = {
     'a': ['lineAnchor'],
     'div': ['math'],
     'pre': ['hljs'],
-    'span': ['math', 'hljs-*'],
+    'span': ['math', 'hljs-*', 'lineNumber'],
     'code': ['language-*']
   },
   allowedAttributes: {
@@ -91,7 +91,8 @@ export default class MarkdownPreview extends React.Component {
 
     this.state = {
       fontSize: config['preview-font-size'],
-      fontFamily: config['preview-font-family']
+      fontFamily: config['preview-font-family'],
+      lineNumber: config['preview-line-number']
     }
   }
   componentDidMount () {
@@ -182,7 +183,8 @@ export default class MarkdownPreview extends React.Component {
   handleConfigApply (e, config) {
     this.setState({
       fontSize: config['preview-font-size'],
-      fontFamily: config['preview-font-family']
+      fontFamily: config['preview-font-family'],
+      lineNumber: config['preview-line-number']
     })
   }
 
@@ -196,7 +198,7 @@ export default class MarkdownPreview extends React.Component {
 
     return (
       <div
-        className={'MarkdownPreview' + (this.props.className != null ? ' ' + this.props.className : '') + (isEmpty ? ' empty' : '')}
+        className={'MarkdownPreview' + (this.props.className != null ? ' ' + this.props.className : '') + (isEmpty ? ' empty' : '') + (this.state.lineNumber ? ' lineNumbered' : '')}
         onClick={e => this.handleClick(e)}
         onDoubleClick={e => this.handleDoubleClick(e)}
         onMouseDown={e => this.handleMouseDown(e)}

browser/lib/markdown.js

@@ -3,6 +3,15 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import hljs from 'highlight.js'
 
+function createGutter (str) {
+  let lc = (str.match(/\n/g) || []).length
+  let lines = []
+  for (let i = 1; i <= lc; i++) {
+    lines.push('<span>' + i + '</span>')
+  }
+  return '<span class="lineNumber">' + lines.join('') + '</span>'
+}
+
 var md = markdownit({
   typographer: true,
   linkify: true,
@@ -11,12 +20,16 @@ var md = markdownit({
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return '<pre class="hljs"><code>' +
+        return '<pre class="hljs">' +
+        createGutter(str) +
+        '<code>' +
         hljs.highlight(lang, str).value +
         '</code></pre>'
       } catch (e) {}
     }
-    return '<pre class="hljs"><code>' +
+    return '<pre class="hljs">' +
+    createGutter(str) +
+    '<code>' +
     str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
     '</code></pre>'
   }

browser/main/modal/Preference/AppSettingTab.js

@@ -80,9 +80,18 @@ export default class AppSettingTab extends React.Component {
     }
   }
 
+  handleLineNumberingClick (e) {
+    let config = this.state.config
+
+    config['preview-line-number'] = e.target.checked
+    this.setState({
+      config
+    })
+  }
+
   handleDisableDirectWriteClick (e) {
     let config = this.state.config
-    config['disable-direct-write'] = !config['disable-direct-write']
+    config['disable-direct-write'] = e.target.checked
     this.setState({
       config
     })
@@ -142,11 +151,14 @@ export default class AppSettingTab extends React.Component {
               <option value='rightclick'>When Right Clicking</option>
             </select>
           </div>
+          <div className='sectionCheck'>
+            <label><input onChange={e => this.handleLineNumberingClick(e)} checked={this.state.config['preview-line-number']} type='checkbox'/>Code block line numbering</label>
+          </div>
           {
             global.process.platform === 'win32'
             ? (
               <div className='sectionCheck'>
-                <label><input onClick={e => this.handleDisableDirectWriteClick(e)} checked={this.state.config['disable-direct-write']} disabled={OSX} type='checkbox'/>Disable Direct Write<span className='sectionCheck-warn'>It will be applied after restarting</span></label>
+                <label><input onChange={e => this.handleDisableDirectWriteClick(e)} checked={this.state.config['disable-direct-write']} disabled={OSX} type='checkbox'/>Disable Direct Write<span className='sectionCheck-warn'>It will be applied after restarting</span></label>
               </div>
             )
             : null

browser/styles/main/ArticleDetail.styl

@@ -382,6 +382,9 @@ infoButton()
           color lighten(inactiveTextColor, 10%)
           user-select none
           font-size 14px
+        &.lineNumbered
+          .lineNumber
+            display block
       .CodeEditor
         absolute top left right bottom
         border-top solid 1px borderColor

browser/styles/mixins/marked.styl

@@ -126,15 +126,25 @@ marked()
     border-radius 5px
     overflow-x auto
     margin 0 0 15px
-    line-height 1.35em
-    &>code
+    line-height 1.35
+    code
       margin 0
       padding 0
       border none
       border-radius 0
-      &>pre
+      pre
         border none
         margin -5px
+    &>span.lineNumber
+      font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
+      display none
+      float left
+      margin 0 0.5em 0 -0.5em
+      border-right 1px solid
+      text-align right
+      &>span
+        display block
+        padding 0 .5em 0 1em
   table
     width 100%
     margin 15px 0 25px