DevTools: [Documentation] Add syntax highlight for code examples

Source/devtools/front_end/documentation/DocumentationView.js

Index: Source/devtools/front_end/documentation/DocumentationView.js
diff --git a/Source/devtools/front_end/documentation/DocumentationView.js b/Source/devtools/front_end/documentation/DocumentationView.js
index 5e782965a5ae9b94703114a957809ef2cd9a23cc..2634911eb09704bd787f4248334225a29ef8a5de 100644
--- a/Source/devtools/front_end/documentation/DocumentationView.js
+++ b/Source/devtools/front_end/documentation/DocumentationView.js
@@ -26,6 +26,11 @@ WebInspector.DocumentationView.showDocumentationURL = function(url, searchItem)
     view.showDocumentation(url, searchItem);
 }
 
+WebInspector.DocumentationView._languageToMimeType = {
+    "javascript": "text/javascript",
+    "html": "text/html"
+};
+
 WebInspector.DocumentationView.prototype = {
     /**
      * @param {string} url
@@ -213,6 +218,10 @@ WebInspector.DocumentationView.Renderer.prototype = {
             var code = example.createChild("div", "documentation-example-code");
             code.classList.add("source-code");
             code.textContent = examples[i].code;
+            if (!examples[i].language)
+                return;

[lushnikov, 2014/09/04 12:27:25]

this will result in a left-over "section" element, which does not have any
content. Gonna look ugly

Let's create unattached section element instead, and attach it to element in the
very end of the function.

[semeny, 2014/09/04 13:20:37]

Done.

+            var syntaxHighlighter = new WebInspector.DOMSyntaxHighlighter(WebInspector.DocumentationView._languageToMimeType[examples[i].language.toLowerCase()], true);
+            syntaxHighlighter.syntaxHighlightNode(code);
         }
     },