Bug 1203960 - Add syntax highlighting to markdown

js/field.js

@@ -949,6 +949,14 @@ function show_comment_preview(bug_id, refresh) {
                 last_comment_text = comment.value;
                 last_markdown_cb_value = markdown_cb.checked;
             }
+            if (markdown_cb.checked) {
+                var pres = document.getElementById('comment_preview_text').getElementsByTagName("pre");
+                for (var i = 0, l = pres.length; i < l; i++) {
+                    if (pres[i].firstChild && pres[i].firstChild.tagName == "CODE") {
+                        hljs.highlightBlock(pres[i].firstChild);
+                    }
+                }
+            }
         },
         failure: function(res) {
             Dom.addClass('comment_preview_loading', 'bz_default_hidden');

js/highlight.js/styles/github.css

+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

template/en/default/bug/comments.html.tmpl

@@ -22,6 +22,11 @@
 [% can_edit_comments = bug.check_can_change_field('longdesc', 0, 1) %]
 [% can_tag_comments = feature_enabled('jsonrpc') AND user.can_tag_comments %]
 
+[% markdown_enabled = feature_enabled('jsonrpc') AND user.settings.use_markdown.value == "on" %]
+[% IF markdown_enabled %]
+  <script>hljs.initHighlightingOnLoad();</script>
+[% END %]
+
 <!-- This auto-sizes the comments and positions the collapse/expand links 
      to the right. -->
 <table class="bz_comment_table">

template/en/default/bug/create/create.html.tmpl

@@ -9,13 +9,19 @@
 [% title = BLOCK %]Enter [% terms.Bug %]: [% product.name FILTER html %][% END %]
 [% use_qa_contact = Param("useqacontact") %]
 
+[% style_urls = ['skins/standard/bug.css'] %]
+[% javascript_urls = [ "js/attachment.js", "js/util.js", "js/field.js", "js/TUI.js", "js/bug.js" ] %]
+
+[% markdown_enabled = feature_enabled('jsonrpc') AND user.settings.use_markdown.value == "on" %]
+[% IF markdown_enabled %]
+  [% javascript_urls.push("js/highlight.js/highlight.pack.js") %]
+  [% style_urls.push("js/highlight.js/styles/github.css") %]
+[% END %]
+
 [% PROCESS global/header.html.tmpl
   title = title
   generate_api_token = 1
   yui = ['datatable', 'button']
-  style_urls = ['skins/standard/bug.css']
-  javascript_urls = [ "js/attachment.js", "js/util.js",
-                      "js/field.js", "js/TUI.js", "js/bug.js" ]
   onload = "set_assign_to($use_qa_contact); hideElementById('attachment_true');
             showElementById('attachment_false'); showElementById('btn_no_attachment');"
 %]

template/en/default/bug/show-header.html.tmpl

@@ -70,6 +70,12 @@
                   "bz_component_$bug.component",
                   "bz_bug_$bug.bug_id",
                   ] %]
+[% markdown_enabled = feature_enabled('jsonrpc') AND user.settings.use_markdown.value == "on" %]
+[% IF markdown_enabled %]
+  [% javascript_urls.push("js/highlight.js/highlight.pack.js") %]
+  [% style_urls.push("js/highlight.js/styles/github.css") %]
+[% END %]
+
 [% FOREACH group = bug.groups_in %]
   [% bodyclasses.push("bz_group_$group.name") %]
 [% END %]