api-templates: display members as simple formatted code

See https://github.com/angular/angular/issues/4258

public/api-builder/angular.io-package/templates/class.template.html

@@ -20,10 +20,10 @@ p.location-badge.
   h2 Annotations
 {%- for decorator in doc.decorators %}
   .l-sub-section
-    h3.annotation {$ decorator.name $}
+    h3.annotation
-    pre.prettyprint
+      pre.prettyprint
-      code.
+        code.
-        @{$ decorator.name $}{$ paramList(decorator.arguments) | indent(8, false) $}
+          @{$ decorator.name $}{$ paramList(decorator.arguments) | indent(8, false) $}
 {% endfor %}
 {%- endif %}
 
@@ -34,33 +34,24 @@ p.location-badge.
 
 {%- if doc.constructorDoc %}
   .l-sub-section
-    h3#{$ doc.constructorDoc.name | toId $} {$ doc.constructorDoc.name $}
+    h3#{$ doc.constructorDoc.name | toId $}
-
+      pre.prettyprint
-    {% if doc.constructorDoc.parameters %}
+        code.
-    pre.prettyprint
+          {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
-      code.
-        {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
-    {% endif %}
     :markdown
 {$ doc.constructorDoc.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
-
-
 {% endif -%}
 
 {%- for member in doc.members %}{% if not member.internal %}
   .l-sub-section
-    h3#{$ member.name | toId $} {$ member.name $}{% if member.optional %}?{% endif %}
+    h3#{$ member.name | toId $}
+      pre.prettyprint
+        code.
+          {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
 
-    {% if member.parameters %}
-    pre.prettyprint
-      code.
-        {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(doc.returnType) $}
-    {% endif %}
     :markdown
 {$ member.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
 
-
-
 {% endif %}{% endfor %}
 {%- endif -%}
 

public/api-builder/angular.io-package/templates/function.template.html

@@ -5,13 +5,10 @@
 {% block body %}
 include ../../_util-fns
 .l-main-section
-  h2(class="function export") {$ doc.name $}
+  h2(class="function export")
-
+    pre.prettyprint
-  {% if doc.parameters %}
+      code.
-  pre.prettyprint
+        export {$ doc.name $}{$ paramList(doc.parameters) | indent(4, true) | trim $}{$ returnType(doc.returnType) $}
-    code.
-      {$ doc.name $}{$ paramList(doc.parameters) | indent(4, true) | trim $}{$ returnType(doc.returnType) $}
-  {% endif %}
 
   p.location-badge.
     exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }

public/resources/css/main.scss

@@ -28,6 +28,7 @@
 @import 'module/buttons';
 @import 'module/table';
 @import 'module/code';
+@import 'module/heading-code';
 @import 'module/code-box';
 @import 'module/sticker';
 @import 'module/bio-card';

public/resources/css/module/_heading-code.scss

@@ -0,0 +1,53 @@
+h1, h2, h3, h4 {
+  .prettyprint {
+    background: $snow;
+    font-family: $mono-font;
+    color: $steel;
+    overflow: hidden;
+    position: relative;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 24px;
+    margin: 0;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+
+    code {
+      background: none;
+      font-size: 15px;
+      padding: 0px;
+    }
+
+
+    .kwd {
+      color: $steel;
+    }
+    .typ,
+    .tag {
+      color: $ruby;
+    }
+    .str,
+    .atv {
+      color: darken($sunshine, 50%);
+    }
+    .atn {
+      color: darken($cactus, 10%);
+    }
+    .com {
+      color: $cloud;
+    }
+    .lit {
+      color: darken($sunshine, 50%);
+    }
+    .pun {
+      color: $coal;
+    }
+    .pln {
+      color: $coal;
+    }
+    .dec {
+      color: darken($grape, 5%);
+    }
+  }
+}