Merge pull request #3101 from minrk/marked

use marked / highlight.js instead of pagedown and prettify

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

@@ -0,0 +1,157 b''
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <[e-mail]>
+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/components

@@ -1,1 +1,1 b''
-Subproject commit f7467391a9f9d4868f0bbf0d088fd572625862a4
+Subproject commit 945dfca396a1a7ca66d36ee758c7d8dca2b11287

IPython/frontend/html/notebook/static/css/style.min.css

@@ -866,6 +866,26 b' a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor'
 .end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;}
 .center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;}
 .corner-all{border-radius:4px;}
+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:#8888ff;}
+.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;}
+.cm-s-ipython span.cm-variable{color:black;}
+.cm-s-ipython span.cm-keyword{color:#008000;font-weight:bold;}
+.cm-s-ipython span.cm-number{color:#080;}
+.cm-s-ipython span.cm-comment{color:#408080;font-style:italic;}
+.cm-s-ipython span.cm-string{color:#BA2121;}
+.cm-s-ipython span.cm-builtin{color:#008000;}
+.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;}
 body{background-color:#ffffff;}
 body.notebook_app{overflow:hidden;}
 blockquote{border-left:4px solid #DDD;padding:0 15px;color:#777;}

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

@@ -42,7 +42,6 b' $(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 b' $(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 b' var IPython = (function (IPython) {'
 
     MarkdownCell.options_default = {
         cm_config: {
-            mode: 'markdown'
+            mode: 'gfm'
         },
         placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$"
     }
@@ -315,9 +315,9 b' 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 b' 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/notebook.less

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

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

@@ -12,9 +12,6 b' 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 b' 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 b' 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>