fix line-height

displaying markdown codeblocks with line numbering

.gitignore

@@ -7,3 +7,4 @@ node_modules/*
 /dist
 /compiled
 /secret
+*.log

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

@@ -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
@@ -192,7 +204,7 @@ export default class AppSettingTab extends React.Component {
             </select>
           </div>
           <div className='sectionSelect'>
-            <label>Code Theme</label>
+            <label>Code block Theme</label>
             <select valueLink={this.linkState('config.theme-code')}>
               {
                 hljsThemeList.map(function(v, i){
@@ -202,7 +214,7 @@ export default class AppSettingTab extends React.Component {
             </select>
           </div>
           <div className='sectionSelect'>
-            <label>Syntax Theme</label>
+            <label>Editor Theme</label>
             <select valueLink={this.linkState('config.theme-syntax')}>
               {
                 aceThemeList.themes.map(function(v, i){

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/main/ArticleList.styl

@@ -30,6 +30,8 @@ articleItemColor = #777
         height 20px
         color articleItemColor
         font-size 11px
+        i
+          margin-right 4px
         .folderName
           overflow ellipsis
           display inline-block

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

browser/styles/theme/dark.styl

@@ -12,8 +12,16 @@ themeDarkTooltip = rgba(0, 0, 0, 0.7)
 themeDarkFocusText = #FFFFFF
 themeDarkFocusButton = lighten(themeDarkTopicColor, 30%)
 themeDarkBoxShadow = alpha(lighten(themeDarkTopicColor, 10%), 0.4);
+themeDarkTableOdd = themeDarkPreview
+themeDarkTableEven = darken(themeDarkPreview, 10%)
+themeDarkTableHead = themeDarkTableEven
+themeDarkTableBorder = themeDarkBorder
+themeDarkModalButtonDefault = themeDarkPreview
+themeDarkModalButtonDanger = #BF360C
 
 body[data-theme="dark"]
+  background-color themeDarkBackground
+
   .Main
     .ArticleNavigator .userInfo .settingBtn .tooltip,
     .ArticleNavigator .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn .tooltip,
@@ -122,6 +130,10 @@ body[data-theme="dark"]
         &:hover
           background-color lighten(themeDarkList, 5%)
 
+        .ArticleList-item-top
+          .folderName
+            color darken(themeDarkText, 15%)
+
       .divider
         border-color themeDarkBorder
 
@@ -182,6 +194,7 @@ body[data-theme="dark"]
         .ArticleEditor
           .CodeEditor
             border-color themeDarkBorder
+            border-radius 0
 
         &>.ArticleDetail-panel-header .ArticleDetail-panel-header-mode
           transition 0.1s
@@ -244,6 +257,30 @@ body[data-theme="dark"]
         &:hover
           background-color brandColor
 
+    .DeleteArticleModal.modal
+      .control
+        button
+          transition 0.1s
+          color themeDarkText
+          border-color lighten(themeDarkModalButtonDefault, 20%)
+          background-color themeDarkModalButtonDefault
+
+          &:hover
+            background-color: lighten(themeDarkModalButtonDefault, 10%)
+
+          &:focus
+            border-color themeDarkTopicColor
+
+          &.danger
+            background-color themeDarkModalButtonDanger
+            border-color lighten(themeDarkModalButtonDanger, 30%)
+
+            &:hover
+              background-color: lighten(themeDarkModalButtonDanger, 10%)
+
+            &:focus
+              border-color lighten(themeDarkModalButtonDanger, 50%)
+
     .Preferences.modal
       .sectionInput input,
       .sectionSelect select
@@ -395,3 +432,29 @@ body[data-theme="dark"]
 
       a:hover
         background-color alpha(lighten(brandColor, 30%), 0.2) !important
+
+      code
+        border-color darken(themeDarkBorder, 10%)
+        background-color lighten(themeDarkPreview, 5%)
+
+      pre
+        code
+          background-color transparent
+
+      table
+        thead
+          tr
+            background-color themeDarkTableHead
+          th
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder
+        tbody
+          tr:nth-child(2n + 1)
+            background-color themeDarkTableOdd
+          tr:nth-child(2n)
+            background-color themeDarkTableEven
+          td
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder

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'
 

lib/main-app.js

@@ -288,6 +288,14 @@ app.on('ready', function () {
       })
       break
     case 'linux':
+      if (process.env.DESKTOP_SESSION === 'cinnamon') {
+        finderWindow = require('./finder-window')
+        finderWindow.on('close', function (e) {
+          if (appQuit) return true
+          e.preventDefault()
+          finderWindow.hide()
+        })
+      }
       // Do nothing.
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "description": "Boostnote",
   "main": "index.js",
   "scripts": {
@@ -27,7 +27,8 @@
   "author": "Dick Choi <fluke8259@gmail.com> (https://github.com/Rokt33r)",
   "contributors": [
     "dojineko (https://github.com/dojineko)",
-    "Romain Bazile (https://github.com/gromain)"
+    "Romain Bazile (https://github.com/gromain)",
+    "Bruno Paz (https://github.com/brpaz)"
   ],
   "bugs": {
     "url": "https://github.com/BoostIO/Boostnote/issues"

readme.md

@@ -127,8 +127,9 @@ grunt zip:osx
 
 ## Contributors
 
-[dojineko](https://github.com/dojineko)
-[Romain Bazile](https://github.com/gromain)
+- [dojineko](https://github.com/dojineko)
+- [Romain Bazile](https://github.com/gromain)
+- [Bruno Paz](https://github.com/brpaz)
 
 ## Copyright & License