docs(CSS): escape > characters in (s)CSS codeblocks to close ffoodd#434

a11y.css.js

@@ -89,6 +89,7 @@ const parseSassComment = comment => {
   const stylesRegex = /((<pre><code class="css language-css">)(.[\s\S]+?)(\/code><\/pre>))/gm
   const cssRegex = /((?<=<code class="css language-css">)(.[\s\S]+?)(?=<\/code>))/gm
   let cssContent = processedContent.match(cssRegex)
+  cssContent = String(cssContent).replace(/(&gt;)+/g, '>')
   let processedCSS = prism.highlight(String(cssContent), prism.languages.css, 'css-extras')
   processedContent = processedContent.replace(stylesRegex, `<div class="pre"><pre><code class="css language-css" data-language="CSS">${processedCSS}</code></pre></div>`)
 
@@ -97,6 +98,7 @@ const parseSassComment = comment => {
   const scssRegex = /((?<=<code class="scss language-scss">)(.[\s\S]+?)(?=<\/code>))/gm
   let scssContent = processedContent.match(scssRegex)
   scssContent = String(scssContent).replace(/(&amp;)+/g, '&')
+  scssContent = String(scssContent).replace(/(&gt;)+/g, '>')
   let processedSCSS = prism.highlight(String(scssContent), prism.languages.scss, 'scss')
   processedContent = processedContent.replace(scssBlockRegex, `<div class="pre"><pre><code class="scss language-scss" data-language="Sass">${processedSCSS}</code></pre></div>`)
 

docs/advices.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description"
           content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
-    <link rel="stylesheet" href="./static/docs.css?v=1663270994087">
+    <link rel="stylesheet" href="./static/docs.css?v=1663309802725">
     <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
     <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="stylesheet" href="./static/css/a11y-en_advices-only.css"><link rel="stylesheet" href="./static/css/a11y-light.min.css">
@@ -691,6 +691,6 @@ <h3>Test</h3>
     </div>
 </footer>
 
-    <script src="./static/docs.js?v=1663270994119"></script>
+    <script src="./static/docs.js?v=1663309802733"></script>
   </body>
 </html>

docs/docs.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description"
           content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
-    <link rel="stylesheet" href="./static/docs.css?v=1663270994132">
+    <link rel="stylesheet" href="./static/docs.css?v=1663309802736">
     <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
     <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="stylesheet" href="./static/css/a11y-light.min.css">
@@ -336,13 +336,13 @@ <h4>Source</h4>
 
   <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
-  <span class="token keyword">@if</span> <span class="token function">str-length</span><span class="token punctuation">(</span><span class="token variable">$first-chunk</span><span class="token punctuation">)</span> &amp;gt<span class="token punctuation">;</span> <span class="token selector">0 </span><span class="token punctuation">{</span>
+  <span class="token keyword">@if</span> <span class="token function">str-length</span><span class="token punctuation">(</span><span class="token variable">$first-chunk</span><span class="token punctuation">)</span> <span class="token selector">> 0 </span><span class="token punctuation">{</span>
     <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$result</span><span class="token punctuation">,</span> <span class="token variable">$first-chunk</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
 
   <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$result</span><span class="token punctuation">,</span> <span class="token function">unquote</span><span class="token punctuation">(</span><span class="token function">str-slice</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">,</span> <span class="token variable">$has-attr</span><span class="token punctuation">,</span> <span class="token variable">$first-paren</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
-  <span class="token keyword">@if</span> <span class="token function">str-length</span><span class="token punctuation">(</span><span class="token variable">$last-chunk</span><span class="token punctuation">)</span> &amp;gt<span class="token punctuation">;</span> <span class="token selector">0 </span><span class="token punctuation">{</span>
+  <span class="token keyword">@if</span> <span class="token function">str-length</span><span class="token punctuation">(</span><span class="token variable">$last-chunk</span><span class="token punctuation">)</span> <span class="token selector">> 0 </span><span class="token punctuation">{</span>
     <span class="token property"><span class="token variable">$result</span></span><span class="token punctuation">:</span> <span class="token function">append</span><span class="token punctuation">(</span><span class="token variable">$result</span><span class="token punctuation">,</span> <span class="token function">replace-attr</span><span class="token punctuation">(</span><span class="token variable">$last-chunk</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
 
@@ -472,7 +472,7 @@ <h4>Example</h4>
 <span class="token punctuation">}</span>
 </code></pre></div>
 <div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token selector"><span class="token class">.selector</span></span> <span class="token punctuation">{</span>
-  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'Did you know the &amp;lt;nav&amp;gt; tag is exclusively restricted to primary and secondary navigation area?'</span><span class="token punctuation">;</span>
+  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'Did you know the &amp;lt;nav> tag is exclusively restricted to primary and secondary navigation area?'</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 </code></pre></div>
               </article>
@@ -497,7 +497,7 @@ <h4>Example</h4>
 <span class="token punctuation">}</span>
 </code></pre></div>
 <div class="pre"><pre><code class="css language-css" data-language="CSS"><span class="token selector">area <span class="token class">.selector</span><span class="token punctuation">,</span> base <span class="token class">.selector</span><span class="token punctuation">,</span> br <span class="token class">.selector</span><span class="token punctuation">,</span> col <span class="token class">.selector</span><span class="token punctuation">,</span> command <span class="token class">.selector</span><span class="token punctuation">,</span> embed <span class="token class">.selector</span><span class="token punctuation">,</span> hr <span class="token class">.selector</span><span class="token punctuation">,</span> img <span class="token class">.selector</span><span class="token punctuation">,</span> input <span class="token class">.selector</span><span class="token punctuation">,</span> keygen <span class="token class">.selector</span><span class="token punctuation">,</span> link <span class="token class">.selector</span><span class="token punctuation">,</span> meta <span class="token class">.selector</span><span class="token punctuation">,</span> param <span class="token class">.selector</span><span class="token punctuation">,</span> source <span class="token class">.selector</span><span class="token punctuation">,</span> track <span class="token class">.selector</span><span class="token punctuation">,</span> wbr <span class="token class">.selector</span><span class="token punctuation">,</span> textarea <span class="token class">.selector</span><span class="token punctuation">,</span> select <span class="token class">.selector</span><span class="token punctuation">,</span> svg <span class="token class">.selector</span><span class="token punctuation">,</span> audio <span class="token class">.selector</span><span class="token punctuation">,</span> video <span class="token class">.selector</span><span class="token punctuation">,</span> iframe <span class="token class">.selector</span></span> <span class="token punctuation">{</span>
-  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Did you know the &amp;lt;nav&amp;gt; tag is exclusively restricted to primary and secondary navigation area?"</span><span class="token punctuation">;</span>
+  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"Did you know the &amp;lt;nav> tag is exclusively restricted to primary and secondary navigation area?"</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
 </code></pre></div>
               </article>
@@ -771,7 +771,7 @@ <h3 id="Mixins-a11y-head">Display messages in &lt;head&gt;</h3>
                 <p>Display messages on <code>&lt;head&gt;</code>'s tags.</p>
 <h4>Source</h4>
 <div class="pre"><pre><code class="scss language-scss" data-language="Sass"><span class="token keyword">@mixin</span> <span class="token function">a11y-head</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$self-closing</span></span><span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-  <span class="token comment">// Because it's in the &amp;lt;head&amp;gt;</span>
+  <span class="token comment">// Because it's in the &amp;lt;head></span>
   <span class="token keyword">@extend</span> <span class="token placeholder selector">%a11y-head</span><span class="token punctuation">;</span>
 
   <span class="token keyword">@if</span> <span class="token selector"><span class="token variable">$self-closing</span> </span><span class="token punctuation">{</span>
@@ -1160,6 +1160,6 @@ <h5>References</h5>
     </div>
 </footer>
 
-    <script src="./static/docs.js?v=1663270994136"></script>
+    <script src="./static/docs.js?v=1663309802737"></script>
   </body>
 </html>

docs/errors.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description"
           content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
-    <link rel="stylesheet" href="./static/docs.css?v=1663270994121">
+    <link rel="stylesheet" href="./static/docs.css?v=1663309802734">
     <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
     <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="stylesheet" href="./static/css/a11y-en_errors-only.css"><link rel="stylesheet" href="./static/css/a11y-light.min.css">
@@ -1406,6 +1406,6 @@ <h3>Test</h3>
     </div>
 </footer>
 
-    <script src="./static/docs.js?v=1663270994124"></script>
+    <script src="./static/docs.js?v=1663309802735"></script>
   </body>
 </html>

docs/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description"
           content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
-    <link rel="stylesheet" href="./static/docs.css?v=1663270994183">
+    <link rel="stylesheet" href="./static/docs.css?v=1663309802751">
     <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
     <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     </head>
@@ -145,6 +145,6 @@ <h2>Contribution</h2>
     </div>
 </footer>
 
-    <script src="./static/docs.js?v=1663270994184"></script>
+    <script src="./static/docs.js?v=1663309802751"></script>
   </body>
 </html>

docs/obsoletes.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description"
           content="This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.">
-    <link rel="stylesheet" href="./static/docs.css?v=1663270994125">
+    <link rel="stylesheet" href="./static/docs.css?v=1663309802735">
     <link rel="shortcut icon" href="https://ffoodd.github.io/a11y.css/static/favicon.ico">
     <link rel="preload" href="./static/fonts/firasans-book.woff2" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="stylesheet" href="./static/css/a11y-en_obsoletes-only.css"><link rel="stylesheet" href="./static/css/a11y-light.min.css">
@@ -273,6 +273,6 @@ <h3>Test</h3>
     </div>
 </footer>
 
-    <script src="./static/docs.js?v=1663270994126"></script>
+    <script src="./static/docs.js?v=1663309802735"></script>
   </body>
 </html>