Merge pull request #3101 from minrk/marked

use marked / highlight.js instead of pagedown and prettify

IPython/frontend/html/notebook/static/js/notebookmain.js

@@ -42,7 +42,6 @@ $(document).ready(function () {
     var baseProjectUrl = $('body').data('baseProjectUrl')
 
     IPython.page = new IPython.Page();
-    IPython.markdown_converter = new Markdown.Converter();
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.quick_help = new IPython.QuickHelp('span#quick_help_area');
@@ -94,6 +93,23 @@ $(document).ready(function () {
     
     $([IPython.events]).on('notebook_loaded.Notebook', first_load);
     IPython.notebook.load_notebook($('body').data('notebookId'));
+    
+    if (marked) {
+        marked.setOptions({
+            gfm : true,
+            tables: true,
+            langPrefix: "language-",
+            highlight: function(code, lang) {
+                var highlighted;
+                if (lang) {
+                    highlighted = hljs.highlight(lang, code, false);
+                } else {
+                    highlighted = hljs.highlightAuto(code);
+                }
+                return highlighted.value;
+            }
+        })
+    }
 
 });
 

IPython/frontend/html/notebook/static/js/textcell.js

@@ -298,7 +298,7 @@ var IPython = (function (IPython) {
 
     MarkdownCell.options_default = {
         cm_config: {
-            mode: 'markdown'
+            mode: 'gfm'
         },
         placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$"
     }
@@ -315,9 +315,9 @@ var IPython = (function (IPython) {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
-            text = IPython.mathjaxutils.remove_math(text)
-            var html = IPython.markdown_converter.makeHtml(text);
-            html = IPython.mathjaxutils.replace_math(html)
+            text = IPython.mathjaxutils.remove_math(text);
+            var html = marked.parser(marked.lexer(text));
+            html = IPython.mathjaxutils.replace_math(html);
             try {
                 this.set_rendered(html);
             } catch (e) {
@@ -329,18 +329,6 @@ var IPython = (function (IPython) {
             }
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
-            var code_snippets = this.element.find("pre > code");
-            code_snippets.replaceWith(function () {
-                var code = $(this).html();
-                /* Substitute br for newlines and   for spaces
-                   before highlighting, since prettify doesn't
-                   preserve those on all browsers */
-                code = code.replace(/(\r\n|\n|\r)/gm, "<br/>");
-                code = code.replace(/ /gm, '&nbsp;');
-                code = prettyPrintOne(code);
-
-                return '<code class="prettyprint">' + code + '</code>';
-            });
             this.typeset()
             this.rendered = true;
         }

IPython/frontend/html/notebook/static/less/highlight.less

@@ -0,0 +1,157 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+Adapted from GitHub theme
+
+*/
+
+pre code {
+  display: block;
+  padding: 0.5em;
+}
+
+.highlight-base,
+pre code,
+pre .subst,
+pre .tag .title,
+pre .lisp .title,
+pre .clojure .built_in,
+pre .nginx .title {
+  color: black;
+}
+
+.highlight-string,
+pre .string,
+pre .constant,
+pre .parent,
+pre .tag .value,
+pre .rules .value,
+pre .rules .value .number,
+pre .preprocessor,
+pre .ruby .symbol,
+pre .ruby .symbol .string,
+pre .aggregate,
+pre .template_tag,
+pre .django .variable,
+pre .smalltalk .class,
+pre .addition,
+pre .flow,
+pre .stream,
+pre .bash .variable,
+pre .apache .tag,
+pre .apache .cbracket,
+pre .tex .command,
+pre .tex .special,
+pre .erlang_repl .function_or_atom,
+pre .markdown .header {
+  color: #BA2121;
+}
+
+.highlight-comment,
+pre .comment,
+pre .annotation,
+pre .template_comment,
+pre .diff .header,
+pre .chunk,
+pre .markdown .blockquote {
+  color: #408080;
+  font-style: italic;
+}
+
+.highlight-number,
+pre .number,
+pre .date,
+pre .regexp,
+pre .literal,
+pre .smalltalk .symbol,
+pre .smalltalk .char,
+pre .go .constant,
+pre .change,
+pre .markdown .bullet,
+pre .markdown .link_url {
+  color: #080;
+}
+
+pre .label,
+pre .javadoc,
+pre .ruby .string,
+pre .decorator,
+pre .filter .argument,
+pre .localvars,
+pre .array,
+pre .attr_selector,
+pre .important,
+pre .pseudo,
+pre .pi,
+pre .doctype,
+pre .deletion,
+pre .envvar,
+pre .shebang,
+pre .apache .sqbracket,
+pre .nginx .built_in,
+pre .tex .formula,
+pre .erlang_repl .reserved,
+pre .prompt,
+pre .markdown .link_label,
+pre .vhdl .attribute,
+pre .clojure .attribute,
+pre .coffeescript .property {
+  color: #88F
+}
+
+.highlight-keyword,
+pre .keyword,
+pre .id,
+pre .phpdoc,
+pre .aggregate,
+pre .css .tag,
+pre .javadoctag,
+pre .phpdoc,
+pre .yardoctag,
+pre .smalltalk .class,
+pre .winutils,
+pre .bash .variable,
+pre .apache .tag,
+pre .go .typename,
+pre .tex .command,
+pre .markdown .strong,
+pre .request,
+pre .status {
+  color: #008000;
+  font-weight: bold;
+}
+
+.highlight-builtin,
+pre .built_in {
+  color: #008000;
+}
+
+pre .markdown .emphasis {
+  font-style: italic;
+}
+
+pre .nginx .built_in {
+  font-weight: normal;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.5;
+}
+
+/* apply the same style to codemirror */
+
+.cm-s-ipython span.cm-variable { .highlight-base()}
+.cm-s-ipython span.cm-keyword { .highlight-keyword() }
+.cm-s-ipython span.cm-number { .highlight-number() }
+.cm-s-ipython span.cm-comment { .highlight-comment() }
+.cm-s-ipython span.cm-string { .highlight-string()}
+.cm-s-ipython span.cm-builtin { .highlight-builtin() }
+.cm-s-ipython span.cm-error { color: #f00; }
+.cm-s-ipython span.cm-operator {color: #AA22FF; font-weight: bold;}
+.cm-s-ipython span.cm-meta {color: #AA22FF;}

IPython/frontend/html/notebook/static/less/notebook.less

@@ -5,7 +5,7 @@
  */
 
 @import "variables.less";
-
+@import "highlight.less";
 
 body {
     background-color:@notebook_background;

IPython/frontend/html/notebook/templates/notebook.html

@@ -12,9 +12,6 @@ window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("components/codemirror/lib/codemirror.css") }}">
-<link rel="stylesheet" href="{{ static_url("css/codemirror-ipython.css") }}">
-
-<link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/celltoolbar.css") }}" type="text/css" />
 
@@ -198,6 +195,7 @@ class="notebook_app"
 <script src="{{ static_url("components/codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/mode/loadmode.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/addon/mode/multiplex.js") }}" charset="utf-8"></script>
+<script src="{{ static_url("components/codemirror/addon/mode/overlay.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("js/codemirror-ipython.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
@@ -205,10 +203,11 @@ class="notebook_app"
 <script src="{{ static_url("components/codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("components/codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
+<script src="{{ static_url("components/codemirror/mode/gfm/gfm.js") }}" charset="utf-8"></script>
 
-<script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
+<script src="{{ static_url("components/marked/lib/marked.js") }}" charset="utf-8"></script>
+<script src="{{ static_url("components/highlight.js/build/highlight.pack.js") }}" charset="utf-8"></script>
 
-<script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>