From c43589fe6af135c86f3a839a0c639cf6ba7c5ab6 Mon Sep 17 00:00:00 2001
From: Masahide Morio <forestailjp@gmail.com>
Date: Sun, 11 Feb 2018 02:28:03 +0900
Subject: [PATCH 1/4] Add file name and any first line number in code block
 (fixed)

---
 browser/components/markdown.styl |  8 ++++++++
 browser/lib/markdown.js          | 16 ++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index d1d306e9..b64af56c 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -220,6 +220,7 @@ pre
     background-color white
   &.CodeMirror
     height initial
+    flex-wrap wrap
     &>code
       flex 1
       overflow-x auto
@@ -229,6 +230,13 @@ pre
     padding 0
     border none
     border-radius 0
+  &>span.filename
+    width 100%
+    border-radius: 5px 0px 0px 0px
+    margin -8px 100% 8px -8px
+    padding 0px 6px
+    background-color #777;
+    color white
   &>span.lineNumber
     display none
     font-size 1em
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index c3510f89..e6ba46d6 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -9,10 +9,11 @@ import {lastFindInArray} from './utils'
 const katex = window.katex
 const config = ConfigManager.get()
 
-function createGutter (str) {
-  const lc = (str.match(/\n/g) || []).length
+function createGutter (str, fc) {
+  if(Number.isNaN(fc)) fc = 1
+  const lc = (str.match(/\n/g) || []).length + fc - 1
   const lines = []
-  for (let i = 1; i <= lc; i++) {
+  for (let i = fc; i <= lc; i++) {
     lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
   return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
@@ -25,6 +26,12 @@ var md = markdownit({
   xhtmlOut: true,
   breaks: true,
   highlight: function (str, lang) {
+    let delimiter = ":";
+    let langinfo = lang.split(delimiter);
+    let lang = langinfo[0];
+    let filename = langinfo[1] || "";
+    let fc = parseInt(langinfo[2],10);
+
     if (lang === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
     }
@@ -32,7 +39,8 @@ var md = markdownit({
       return `<pre class="sequence">${str}</pre>`
     }
     return '<pre class="code">' +
-      createGutter(str) +
+      '<span class="filename">' + filename + '</span>' +
+      createGutter(str, fc) +
       '<code class="' + lang + '">' +
       str +
       '</code></pre>'

From 3194a7b1a2f108111a44da7c897065b3209d3b7d Mon Sep 17 00:00:00 2001
From: Masahide Morio <forestailjp@gmail.com>
Date: Mon, 19 Feb 2018 23:02:25 +0900
Subject: [PATCH 2/4] followed eslintrc

---
 browser/lib/markdown.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index e6ba46d6..003dd58d 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -10,7 +10,7 @@ const katex = window.katex
 const config = ConfigManager.get()
 
 function createGutter (str, fc) {
-  if(Number.isNaN(fc)) fc = 1
+  if (Number.isNaN(fc)) fc = 1
   const lc = (str.match(/\n/g) || []).length + fc - 1
   const lines = []
   for (let i = fc; i <= lc; i++) {
@@ -26,22 +26,22 @@ var md = markdownit({
   xhtmlOut: true,
   breaks: true,
   highlight: function (str, lang) {
-    let delimiter = ":";
-    let langinfo = lang.split(delimiter);
-    let lang = langinfo[0];
-    let filename = langinfo[1] || "";
-    let fc = parseInt(langinfo[2],10);
+    const delimiter = ':'
+    const langInfo = lang.split(delimiter)
+    const langType = langInfo[0]
+    const fileName = langInfo[1] || ''
+    const fc = parseInt(langInfo[2], 10)
 
-    if (lang === 'flowchart') {
+    if (langType === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
     }
-    if (lang === 'sequence') {
+    if (langType === 'sequence') {
       return `<pre class="sequence">${str}</pre>`
     }
     return '<pre class="code">' +
-      '<span class="filename">' + filename + '</span>' +
+      '<span class="filename">' + fileName + '</span>' +
       createGutter(str, fc) +
-      '<code class="' + lang + '">' +
+      '<code class="' + langType + '">' +
       str +
       '</code></pre>'
   }

From c3586372e0e054d1cdfcbba188f42b91a5e62cde Mon Sep 17 00:00:00 2001
From: Junyoung Choi <fluke8259@gmail.com>
Date: Thu, 22 Feb 2018 10:49:59 +0900
Subject: [PATCH 3/4] Rename variables

---
 browser/lib/markdown.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index 003dd58d..ce511c0b 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -9,11 +9,11 @@ import {lastFindInArray} from './utils'
 const katex = window.katex
 const config = ConfigManager.get()
 
-function createGutter (str, fc) {
-  if (Number.isNaN(fc)) fc = 1
-  const lc = (str.match(/\n/g) || []).length + fc - 1
+function createGutter (str, firstLineNumber) {
+  if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
+  const lastLineNumber = (str.match(/\n/g) || []).length + firstLineNumber - 1
   const lines = []
-  for (let i = fc; i <= lc; i++) {
+  for (let i = firstLineNumber; i <= lastLineNumber; i++) {
     lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
   return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'

From e4fbdb35a3226e3b9f23c9a743cbeb80463849d7 Mon Sep 17 00:00:00 2001
From: Junyoung Choi <fluke8259@gmail.com>
Date: Thu, 22 Feb 2018 10:54:12 +0900
Subject: [PATCH 4/4] Rename a variable name again

---
 browser/lib/markdown.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index ce511c0b..d0801a1b 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -30,7 +30,7 @@ var md = markdownit({
     const langInfo = lang.split(delimiter)
     const langType = langInfo[0]
     const fileName = langInfo[1] || ''
-    const fc = parseInt(langInfo[2], 10)
+    const firstLineNumber = parseInt(langInfo[2], 10)
 
     if (langType === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
@@ -40,7 +40,7 @@ var md = markdownit({
     }
     return '<pre class="code">' +
       '<span class="filename">' + fileName + '</span>' +
-      createGutter(str, fc) +
+      createGutter(str, firstLineNumber) +
       '<code class="' + langType + '">' +
       str +
       '</code></pre>'