replace showdown with highlight + markdown

gitcoinco · Aug 3, 2019 · 648a10b · 648a10b
1 parent 43331e2
commit 648a10b
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 28 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -4,7 +4,8 @@ app/assets/v2/js/event_ethdenver2019/blockies.js
 app/assets/v2/js/lib/ipfs-api.js
 app/assets/v2/js/lib/jquery*.js
 app/assets/v2/js/lib/jsrender.js
-app/assets/v2/js/lib/showdown.js
+app/assets/v2/js/lib/markdown-it.js
+app/assets/v2/js/lib/highlight.js
 app/assets/v2/js/lib/tooltip.js
 app/assets/v2/js/lib/tweenlite.js
 app/assets/v2/js/abi.js

diff --git a/.stylelintignore b/.stylelintignore
@@ -2,3 +2,4 @@ app/assets/v2/css/jquery.select2.min.css
 app/assets/v2/css/bootstrap.min.css
 app/assets/v2/js/lib/tweenlite.js
 app/assets/v2/js/abi.js
+app/assets/v2/css/highlight_github.css
diff --git a/app/assets/v2/css/bounty.css b/app/assets/v2/css/bounty.css
@@ -163,9 +163,9 @@ body {
   color: #000000;
 }
 
-#issue_description pre, code {
+/* #issue_description pre, code {
   padding: 1em 0;
-}
+} */
 
 #bounty-info-row {
   margin-left: 1px;
@@ -529,11 +529,6 @@ a.btn {
   color: #F5A623;
 }
 
-.code-snippet {
-  background-color: #F2F6F9;
-  padding: 1rem;
-}
-
 #funder_notif_info .bounty-notification {
   border: orange 1px solid;
   border-radius: 3px;
@@ -737,6 +732,7 @@ a.btn {
 .modal .magnify {
   width: auto;
   max-width: 100%;
+  overflow-y: scroll;
 }
 
 .bg-container {

diff --git a/app/assets/v2/css/highlight_github.css b/app/assets/v2/css/highlight_github.css
diff --git a/app/assets/v2/js/lib/highlight.js b/app/assets/v2/js/lib/highlight.js
diff --git a/app/assets/v2/js/lib/markdown-it.js b/app/assets/v2/js/lib/markdown-it.js
diff --git a/app/assets/v2/js/lib/showdown.js b/app/assets/v2/js/lib/showdown.js
diff --git a/app/assets/v2/js/pages/bounty_details.js b/app/assets/v2/js/pages/bounty_details.js
@@ -164,11 +164,24 @@ var callbacks = {
     return [ 'status', ui_status ];
   },
   'issue_description': function(key, val, result) {
-    var converter = new showdown.Converter({
-      simplifiedAutoLink: true
-    });
 
-    ui_body = sanitize(converter.makeHtml(val));
+    const _markdown = new markdownit({
+      linkify: true,
+      highlight: function (str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return '<pre class="hljs"><code>' +
+                    hljs.highlight(lang, str, true).value +
+                   '</code></pre>';
+          } catch (__) {}
+        }
+        return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+      }
+    })
+    _markdown.renderer.rules.table_open = function() {
+      return '<table class="table">';
+    };
+    ui_body = sanitize(_markdown.render(val));
     return [ 'issue_description', ui_body ];
   },
   'bounty_owner_address': address_ize,
@@ -905,11 +918,10 @@ var build_detail_page = function(result) {
       _result = callbacks[key](key, val, result);
       val = _result[1];
     }
-    var _entry = {
-      'head': head,
-      'key': key,
-      'val': val
-    };
+
+    hljs.initHighlighting.called = false;
+    hljs.initHighlighting();
+
     var id = '#' + key;
 
     if ($(id).length) {
@@ -931,12 +943,10 @@ var build_detail_page = function(result) {
       '</div>' +
       '<div class="col-12 pt-2 pb-2"><img class="magnify" src="' + $(this).attr('src') + '"/></div></div></div>');
 
-    var modal = $(content).appendTo('body').modal({
+    $(content).appendTo('body').modal({
       modalClass: 'modal magnify'
     });
   });
-
-  $('#bounty_details #issue_description code').parent().addClass('code-snippet');
 };
 
 const is_current_user_interested = function(result) {

diff --git a/app/dashboard/templates/bounty/details.html b/app/dashboard/templates/bounty/details.html
@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="{% static "v2/css/bounty.css" %}">
     <link rel="stylesheet" href="{% static "v2/css/user_popover.css" %}">
     <link rel="stylesheet" href="{% static "v2/css/tag.css" %}">
+    <link rel="stylesheet" href="{% static "v2/css/highlight_github.css" %}">
   </head>
 
   <body class="interior {{active}} g-font-muli">
@@ -438,19 +439,19 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
     {% endif %}
   </script>
 
-  <!-- jQuery -->
-  <script src="{% static "v2/js/lib/showdown.js" %}"></script>
+  <script src="{% static "v2/js/lib/highlight.js" %}"></script>
+  <script src="{% static "v2/js/lib/markdown-it.js" %}"></script>
+
   <script src="{% static "v2/js/abi.js" %}"></script>
   <script src="/dynamic/js/tokens_dynamic.js"></script>
   <script src="{% static "v2/js/tokens.js" %}"></script>
   <script src="{% static "v2/js/amounts.js" %}"></script>
-  <script src="{% static "v2/js/clipboard.js" %}"></script>>
+  <script src="{% static "v2/js/clipboard.js" %}"></script>
   <script>
     $('[data-toggle="popover"]').popover()
-
     $("body").on("mouseover", "[data-username] img", function(e) {
       openContributorPopOver($(this).parent().data("username"), $(this));
-});
+    });
   </script>
   <script src="{% static "v2/js/pages/bounty_funder_payout_reminder.js" %}"></script>
   <script src="{% static "v2/js/pages/bounty_share.js" %}"></script>