Add file name and any first line number in code block (fixed)

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

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>'