proportional font-size when editing heading cells

@MinRK @takluyver and I had the idea to do this when we were discussing #6225.

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

@@ -351,6 +351,9 @@ define([
     };
 
     HeadingCell.options_default = {
+        cm_config: {
+            theme: 'heading-1'
+        },
         placeholder: "Type Heading Here"
     };
 
@@ -378,6 +381,8 @@ define([
      */
     HeadingCell.prototype.set_level = function (level) {
         this.level = level;
+        this.code_mirror.setOption("theme", "heading-"+level);
+
         if (this.rendered) {
             this.rendered = false;
             this.render();

IPython/html/static/notebook/less/textcell.less

@@ -34,3 +34,17 @@ h1,h2,h3,h4,h5,h6 {
 div.cell.text_cell.rendered {
     padding: 0px;
 }
+
+.cm-s-heading-1,
+.cm-s-heading-2,
+.cm-s-heading-3,
+.cm-s-heading-4,
+.cm-s-heading-5,
+.cm-s-heading-6 { font-weight: bold;}
+
+.cm-s-heading-1 { font-size:150%; }
+.cm-s-heading-2 { font-size: 130%; }
+.cm-s-heading-3 { font-size: 120%; }
+.cm-s-heading-4 { font-size: 110%; }
+.cm-s-heading-5 { font-size: 100%; }
+.cm-s-heading-6 { font-size: 90%; }

IPython/html/static/style/ipython.min.css

@@ -1126,6 +1126,32 @@ h6:hover .anchor-link {
 div.cell.text_cell.rendered {
   padding: 0px;
 }
+.cm-s-heading-1,
+.cm-s-heading-2,
+.cm-s-heading-3,
+.cm-s-heading-4,
+.cm-s-heading-5,
+.cm-s-heading-6 {
+  font-weight: bold;
+}
+.cm-s-heading-1 {
+  font-size: 150%;
+}
+.cm-s-heading-2 {
+  font-size: 130%;
+}
+.cm-s-heading-3 {
+  font-size: 120%;
+}
+.cm-s-heading-4 {
+  font-size: 110%;
+}
+.cm-s-heading-5 {
+  font-size: 100%;
+}
+.cm-s-heading-6 {
+  font-size: 90%;
+}
 .widget-area {
   /*
     LESS file that styles IPython notebook widgets and the area they sit in.

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

@@ -8750,6 +8750,32 @@ h6:hover .anchor-link {
 div.cell.text_cell.rendered {
   padding: 0px;
 }
+.cm-s-heading-1,
+.cm-s-heading-2,
+.cm-s-heading-3,
+.cm-s-heading-4,
+.cm-s-heading-5,
+.cm-s-heading-6 {
+  font-weight: bold;
+}
+.cm-s-heading-1 {
+  font-size: 150%;
+}
+.cm-s-heading-2 {
+  font-size: 130%;
+}
+.cm-s-heading-3 {
+  font-size: 120%;
+}
+.cm-s-heading-4 {
+  font-size: 110%;
+}
+.cm-s-heading-5 {
+  font-size: 100%;
+}
+.cm-s-heading-6 {
+  font-size: 90%;
+}
 .widget-area {
   /*
     LESS file that styles IPython notebook widgets and the area they sit in.