Use marked.js to show changelog in Markdown mode

Author: Marcel Gerber

CHANGELOG.md

@@ -9,7 +9,6 @@
 
 ## 0.10.12
 * Added features to view authors of a file or current selection.
-
 * Push dialog shows masked password.
 * Tabs are now properly displayed in the diffs respecting Brackets "tabSize" preference.
 

htmlContent/git-changelog-dialog.html

@@ -3,7 +3,7 @@
         <h1 class="dialog-title">Brackets Git: {{TITLE}}</h1>
     </div>
     <div class="modal-body table-striped tab-content">
-        <pre id="git-changelog"></pre>
+        <div id="git-changelog"></div>
     </div>
     <div class="modal-footer">
         <button data-button-id="ok" class="dialog-button btn btn-80">{{Strings.BUTTON_CLOSE}}</button>

less/brackets-git.less

@@ -266,6 +266,41 @@
     }
 }
 
+#git-changelog-dialog {
+    #git-changelog {
+        color: #333333;
+        font-family: Helvetica, arial, sans-serif;
+        font-size: 15px;
+        line-height: 1.7px;
+        padding: 1em;
+        margin: auto;
+        background: #f8f8f8;
+        border-radius: 5px;
+        p {
+            margin: 1em 0;
+        }
+        h1, h2 {
+            color: #111111;
+        }
+        h1 {
+            font-size: 2.5em;
+            font-weight: bold;
+            border-bottom: 1px solid #dddddd;
+        }
+        h2 {
+            font-size: 2em;
+            border-bottom: 1px solid #eeeeee;
+        }
+        li {
+            margin: 4px 0;
+        }
+        ul {
+            margin-top: 18px;
+            margin-bottom: 28px;
+        }
+    }
+}
+
 #git-commit-dialog, #git-diff-dialog {
     .modal-body {
         .flex-box(column);

src/ChangelogDialog.js

@@ -12,6 +12,8 @@ define(function (require, exports) {
         Strings                    = require("../strings"),
         changelogDialogTemplate    = require("text!htmlContent/git-changelog-dialog.html");
 
+    var marked                     = require("../thirdparty/marked");
+
     var dialog;
 
     exports.show = function () {
@@ -21,7 +23,11 @@ define(function (require, exports) {
         dialog = Dialogs.showModalDialogUsingTemplate(compiledTemplate);
 
         FileUtils.readAsText(FileSystem.getFileForPath(Preferences.get("extensionDirectory") + "CHANGELOG.md")).done(function (content) {
-            $("#git-changelog", dialog.getElement()).text(content);
+            content = marked(content, {
+                gfm: true,
+                breaks: true
+            });
+            $("#git-changelog", dialog.getElement()).html(content);
         });
     };