add code block line numbering option to

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,14 +3,14 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import hljs from 'highlight.js'
 
-var createGutter = function (str) {
+function createGutter (str) {
-  var lc = (str.match(/\n/g) || []).length;
+  let lc = (str.match(/\n/g) || []).length
-  var lines = [];
+  let lines = []
-  for (var i = 1; i <= lc; i++) {
+  for (let i = 1; i <= lc; i++) {
-    lines.push('<span>' + i + '</span>');
+    lines.push('<span>' + i + '</span>')
   }
-  return '<span>' + lines.join('') + '</span>';
+  return '<span class="lineNumber">' + lines.join('') + '</span>'
-};
+}
 
 var md = markdownit({
   typographer: true,

browser/main/modal/Preference/AppSettingTab.js

@@ -81,9 +81,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
     })
@@ -174,11 +183,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

@@ -135,19 +135,18 @@ marked()
       &>pre
         border none
         margin -5px
-    &>span
+    &>span.lineNumber
       font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
-      display block
+      display none
       float left
       margin 0 0.5em 0 -0.5em
       border-right 1px solid
       text-align right
+      font-size 0.9em
+      line-height 1.65em
       &>span
         display block
         padding 0 .5em 0 1em
-    &>.cl
-      display block
-      clear both
   table
     width 100%
     margin 15px 0 25px

lib/config.js

@@ -15,7 +15,8 @@ const defaultConfig = {
   'disable-direct-write': false,
   'theme-ui': 'light',
   'theme-code': 'xcode',
-  'theme-syntax': 'xcode'
+  'theme-syntax': 'xcode',
+  'preview-line-number': false
 }
 const configFile = 'config.json'