docs(11ty): improve HTML syntax highlighting

ThainBBdL · Mar 3, 2022 · 85dbd86 · 85dbd86
1 parent 0f1e3a6
commit 85dbd86
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/a11y.css.js b/a11y.css.js
@@ -102,9 +102,12 @@ 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
   let htmlContent = processedContent.match(htmlRegex)
-  let processedHTML = prism.highlight(String(htmlContent), prism.languages.html, 'html')
+  htmlContent = String(htmlContent).replace(/(&lt;)+/g, '<')
+  htmlContent = htmlContent.replace(/(&gt;)+/g, '>')
+  let processedHTML = prism.highlight(htmlContent, prism.languages.html, 'html')
   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')

diff --git a/src/assets/css/docs.css b/src/assets/css/docs.css
@@ -303,7 +303,7 @@ h2[id]::before {
   background: #f3f0e0;
   bottom: 0;
   content: "";
-  left: -3rem;
+  left: -2rem;
   position: absolute;
   top: 0;
   z-index: -2;