docs(11ty): improved code blocks

a11y.css.js

@@ -102,10 +102,10 @@ const parseSassComment = comment => {
   const content = fm(comment)
   let processedContent = new showdown.Converter().makeHtml(content.body)
 
-  const htmlRegex = /(<code class="html language-html">(.[\s\S]+?)<\/code>)/gm
+  const htmlRegex = /((?<=<code class="html language-html">)(.[\s\S]+?)(?=<\/code>))/gm
   let htmlContent = processedContent.match(htmlRegex)
   let processedHTML = prism.highlight(String(htmlContent), prism.languages.html, 'html')
-  const cssRegex = /(<code class="css language-css">(.[\s\S]+?)<\/code>)/gm
+  const cssRegex = /((?<=<code class="css language-css">)(.[\s\S]+?)(?=<\/code>))/gm
   let cssContent = processedContent.match(cssRegex)
   let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css')
 

src/assets/css/docs.css

@@ -2,6 +2,7 @@
 
 @import "normalize.css";
 @import "fira-sans.css";
+@import "prism.css";
 
 /* =======================
  * = a11y.css' docs styles
@@ -388,17 +389,17 @@ table {
 }
 
 pre {
-  border: 0;
-  color: #032C36;
+  color: #807373;
   direction: ltr;
-  font-family: "Consolas", "Monaco", "Andale Mono", monospace;
-  font-size: small;
-  tab-size: 2;
+  font-family: monospace;
+  hyphens: none;
+  tab-size: 4;
   overflow-x: auto;
   text-align: left;
-  text-shadow: 0 1px #fff;
   white-space: pre;
   word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
 }
 
 p code,
@@ -533,56 +534,49 @@ aside img {
   position: absolute;
 }
 
-.codeExample,
-.codeBlock.cssExample {
+h3 + pre {
+  background: #fff;
   border: 1px solid #e5dec8;
   border-radius: 4px;
   margin: 1em 0;
+  padding: 1em;
+  position: relative;
 }
 
-.cssExample::before,
-.codeExample::before {
+h3 + pre > code {
+  display: block;
+  margin: 3em 0 1em;
+}
+
+h3 + pre > code::before {
   background: #fcf9e9;
   border: 1px solid #e5dec8;
   border-radius: 4px 0 4px 0;
   color: #7b6e50;
   content: "Example";
-  display: inline-block;
+  font-family: Fira Sans,Helvetica Neue,Arial,Nimbus Sans L,sans-serif,Segoe UI Emoji,Segoe UI Symbol;
   font-style: italic;
-  padding: .25em .5em;
-  transform: translate3d(-1px, -1px, 0);
+  left: -1px;
+  padding: .5em 1em;
+  position: absolute;
+  top: -1px;
 }
 
-.cssExample::before {
+h3 + pre > code[class*="css"]::before {
   content: "CSS";
-  margin-bottom: -1em;
-  transform: translate3d( calc( -1em - 1px ),  calc( -1em - 1px ), 0);
-}
-
-.codeBlock,
-.exampleOutput {
-  padding: 1em;
 }
 
+/*
 .codeBlock {
   background: #fffef9;
   border-top: 1px solid #e5dec8;
   border-radius: 0 0 4px 4px;
-}
-
-.codeExample {
-  background: #fff;
-}
+}*/
 
 form label {
   min-width: 1em;
 }
 
-.s, .nd { color: #07a }
-.na, .cssExample .nt { color: #667f1f }
-.nt, .cssExample .err + .nt { color: #905 }
-.o, .err { color: #807373 }
-
 #empty-link_code,
 #empty-title_code,
 #empty-node_code {

src/assets/css/prism.css

@@ -0,0 +1,70 @@
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #9a6e3a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #690;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #dd4a68;
+}
+
+.token.function,
+.token.class-name {
+  color: #07a;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}