Make netlifyconfig_debug HTML

Highlight debug yaml with chroma

config.yaml

@@ -10,7 +10,7 @@ outputFormats:
   netlifycms_debug:
     baseName: config
     isPlainText: true
-    mediatype: text/plain
+    mediatype: text/html
     notAlternative: false
   netlifycms_config:
     baseName: config

templates/single.netlifycms_debug.html

@@ -0,0 +1,13 @@
+<style>
+/* https://xyproto.github.io/splash/docs/monokailight.html */
+.chroma{color:#272822;background-color:#fafafa;padding:1rem;}.chroma .err{color:#960050;background-color:#1e0010}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{margin-right:.4em;padding:0 .4em 0 .4em;color:#7f7f7f}.chroma .ln{margin-right:.4em;padding:0 .4em 0 .4em;color:#7f7f7f}.chroma .k{color:#00a8c8}.chroma .kc{color:#00a8c8}.chroma .kd{color:#00a8c8}.chroma .kn{color:#f92672}.chroma .kp{color:#00a8c8}.chroma .kr{color:#00a8c8}.chroma .kt{color:#00a8c8}.chroma .n{color:#111}.chroma .na{color:#75af00}.chroma .nb{color:#111}.chroma .bp{color:#111}.chroma .nc{color:#75af00}.chroma .no{color:#00a8c8}.chroma .nd{color:#75af00}.chroma .ni{color:#111}.chroma .ne{color:#75af00}.chroma .nf{color:#75af00}.chroma .fm{color:#111}.chroma .nl{color:#111}.chroma .nn{color:#111}.chroma .nx{color:#75af00}.chroma .py{color:#111}.chroma .nt{color:#f92672}.chroma .nv{color:#111}.chroma .vc{color:#111}.chroma .vg{color:#111}.chroma .vi{color:#111}.chroma .vm{color:#111}.chroma .l{color:#ae81ff}.chroma .ld{color:#d88200}.chroma .s{color:#d88200}.chroma .sa{color:#d88200}.chroma .sb{color:#d88200}.chroma .sc{color:#d88200}.chroma .dl{color:#d88200}.chroma .sd{color:#d88200}.chroma .s2{color:#d88200}.chroma .se{color:#8045ff}.chroma .sh{color:#d88200}.chroma .si{color:#d88200}.chroma .sx{color:#d88200}.chroma .sr{color:#d88200}.chroma .s1{color:#d88200}.chroma .ss{color:#d88200}.chroma .m{color:#ae81ff}.chroma .mb{color:#ae81ff}.chroma .mf{color:#ae81ff}.chroma .mh{color:#ae81ff}.chroma .mi{color:#ae81ff}.chroma .il{color:#ae81ff}.chroma .mo{color:#ae81ff}.chroma .o{color:#f92672}.chroma .ow{color:#f92672}.chroma .p{color:#111}.chroma .c{color:#75715e}.chroma .ch{color:#75715e}.chroma .cm{color:#75715e}.chroma .c1{color:#75715e}.chroma .cs{color:#75715e}.chroma .cp{color:#75715e}.chroma .cpf{color:#75715e}.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}
+</style>
+{{- with partialCached "tnd-netlifycms/private/go" . "tnd-netlifycms/private/go" -}}
+{{ $yaml_file := "" }}
+{{ with $.OutputFormats.Get "netlifycms_config" }}
+  {{ $yaml_file = .RelPermalink }}
+{{ end }}
+{{ $intro := printf `# This is a representation of %s` $yaml_file }}
+<div style="margin-bottom:-1rem;">{{ highlight $intro "yaml" "" }}</div>
+{{ highlight . "yaml" "" }}
+{{- end -}}