♻️ Reduce repetition in main CSS

assets/css/main.css

@@ -5,13 +5,12 @@
 
 body a,
 body button {
-  @apply transition;
+  @apply transition-colors;
 }
 
 /* Scale SVG icons to text size */
 .icon svg {
-  height: 1em;
-  width: 1em;
+  @apply h-[1em] w-[1em];
 }
 
 /* Search */
@@ -23,11 +22,6 @@ body button {
 }
 
 /* Heading anchors */
-.prose .heading-anchor {
-  @apply absolute top-0 no-underline opacity-0;
-  width: 1.1em;
-  left: -1.1em;
-}
 .prose .heading-anchor:hover {
   @apply underline bg-transparent text-primary-500 !important;
 }
@@ -36,41 +30,36 @@ body button {
 .prose h2:hover > .heading-anchor,
 .prose h3:hover > .heading-anchor,
 .prose h4:hover > .heading-anchor {
-  @apply opacity-100;
+  @apply no-underline opacity-100 text-primary-200;
 }
 
 /* Article pagination */
 .article-pagination a:hover .article-pagination-title {
   @apply underline decoration-primary-500;
 }
-
 .article-pagination a:hover .article-pagination-direction {
   @apply text-primary-700 dark:text-primary-400;
 }
 
 /* RTL support */
-[dir="rtl"] .prose blockquote {
-  @apply pr-4 border-l-0 border-r-4;
+.prose blockquote {
+  @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
 }
-
-[dir="rtl"] .prose ul > li,
-[dir="rtl"] .prose ol > li {
-  @apply pl-0 pr-2 mr-7;
+.prose ul > li,
+.prose ol > li {
+  @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
 }
-
-[dir="rtl"] .prose ol > li:before,
-[dir="rtl"] .prose ul > li:before {
-  @apply left-auto right-1;
+.prose ol > li:before,
+.prose ul > li:before {
+  @apply rtl:left-auto rtl:right-1;
 }
-
-[dir="rtl"] .prose thead td:first-child,
-[dir="rtl"] .prose thead th:first-child {
-  @apply pr-0;
+.prose thead td:first-child,
+.prose thead th:first-child {
+  @apply rtl:pr-0;
 }
-
-[dir="rtl"] .prose thead td:last-child,
-[dir="rtl"] .prose thead th:last-child {
-  @apply pl-0;
+.prose thead td:last-child,
+.prose thead th:last-child {
+  @apply rtl:pl-0;
 }
 
 /* -- Chroma Highlight -- */
@@ -78,12 +67,6 @@ body button {
 .prose .chroma {
   @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
 }
-/* Other */
-.chroma .x {
-}
-/* Error */
-.chroma .err {
-}
 /* LineTableTD */
 .chroma .lntd,
 .chroma .lntd pre {
@@ -102,298 +85,178 @@ body button {
   @apply p-0 m-0;
 }
 /* LineNumbersTable */
-.chroma .lnt {
-  @apply text-neutral-600 dark:text-neutral-300;
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
-}
 /* LineNumbers */
+.chroma .lnt,
 .chroma .ln {
-  @apply text-neutral-600 dark:text-neutral-300;
-  margin-right: 0.4em;
-  padding: 0 0.4em 0 0.4em;
+  @apply text-neutral-600 dark:text-neutral-300  mr-[0.4em] px-[0.4em] py-0;
 }
 /* Keyword */
-.chroma .k {
+/* KeywordDeclaration */
+/* KeywordNamespace */
+/* KeywordPseudo */
+/* KeywordReserved */
+/* NameClass */
+/* NameFunctionMagic */
+/* NameNamespace */
+/* NameVariableClass */
+/* Operator */
+.chroma .k,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr,
+.chroma .nc,
+.chroma .fm,
+.chroma .nn,
+.chroma .vc,
+.chroma .o {
   @apply text-primary-600 dark:text-primary-300;
 }
 /* KeywordConstant */
 .chroma .kc {
   @apply font-semibold text-secondary-400 dark:text-secondary-500;
 }
-/* KeywordDeclaration */
-.chroma .kd {
-  @apply text-primary-600 dark:text-primary-300;
-}
-/* KeywordNamespace */
-.chroma .kn {
-  @apply text-primary-600 dark:text-primary-300;
-}
-/* KeywordPseudo */
-.chroma .kp {
-  @apply text-primary-600 dark:text-primary-300;
-}
-/* KeywordReserved */
-.chroma .kr {
-  @apply text-primary-600 dark:text-primary-300;
-}
 /* KeywordType */
-.chroma .kt {
+/* NameVariable */
+/* NameVariableInstance */
+/* NameVariableMagic */
+/* LiteralNumber */
+/* LiteralNumberBin */
+/* LiteralNumberFloat */
+/* LiteralNumberHex */
+/* LiteralNumberInteger */
+/* LiteralNumberIntegerLong */
+/* LiteralNumberOct */
+.chroma .kt,
+.chroma .nv,
+.chroma .vi,
+.chroma .vm,
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .il,
+.chroma .mo {
   @apply text-secondary-400 dark:text-secondary-600;
 }
 /* Name */
-.chroma .n {
+/* NameDecorator */
+/* NameEntity */
+/* NameLabel */
+.chroma .n,
+.chroma .nd,
+.chroma .ni,
+.chroma .nl {
   @apply text-secondary-900 dark:text-secondary-200;
 }
 /* NameAttribute */
-.chroma .na {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
 /* NameBuiltin */
-.chroma .nb {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
 /* NameBuiltinPseudo */
-.chroma .bp {
+/* NameOther */
+/* NameProperty */
+/* NameTag */
+.chroma .na,
+.chroma .nb,
+.chroma .bp,
+.chroma .nx,
+.chroma .py,
+.chroma .nt {
   @apply text-secondary-800 dark:text-secondary-300;
 }
-/* NameClass */
-.chroma .nc {
-  @apply text-primary-600 dark:text-primary-300;
-}
 /* NameConstant */
-.chroma .no {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-/* NameDecorator */
-.chroma .nd {
-  @apply text-secondary-900 dark:text-secondary-200;
-}
-/* NameEntity */
-.chroma .ni {
-  @apply text-secondary-900 dark:text-secondary-200;
-}
 /* NameException */
-.chroma .ne {
+/* NameVariableGlobal */
+.chroma .no,
+.chroma .ne,
+.chroma .vg {
   @apply font-semibold text-secondary-400 dark:text-secondary-500;
 }
 /* NameFunction */
 .chroma .nf {
   @apply text-secondary-600 dark:text-secondary-500;
 }
-/* NameFunctionMagic */
-.chroma .fm {
-  @apply text-primary-600 dark:text-primary-300;
-}
-/* NameLabel */
-.chroma .nl {
-  @apply text-secondary-900 dark:text-secondary-200;
-}
-/* NameNamespace */
-.chroma .nn {
-  @apply text-primary-600 dark:text-primary-300;
-}
-/* NameOther */
-.chroma .nx {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
-/* NameProperty */
-.chroma .py {
-  color: #cebc3a;
-}
-/* NameTag */
-.chroma .nt {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
-/* NameVariable */
-.chroma .nv {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* NameVariableClass */
-.chroma .vc {
-  @apply text-primary-600 dark:text-primary-300;
-}
-/* NameVariableGlobal */
-.chroma .vg {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-/* NameVariableInstance */
-.chroma .vi {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* NameVariableMagic */
-.chroma .vm {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
 /* Literal */
-.chroma .l {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralDate */
-.chroma .ld {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralString */
-.chroma .s {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringAffix */
-.chroma .sa {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringBacktick */
-.chroma .sb {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringChar */
-.chroma .sc {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringDelimiter */
-.chroma .dl {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringDoc */
-.chroma .sd {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringDouble */
-.chroma .s2 {
+/* LiteralStringHeredoc */
+/* LiteralStringInterpol */
+/* LiteralStringOther */
+/* LiteralStringSingle */
+/* GenericInserted */
+/* GenericOutput */
+/* GenericPrompt */
+.chroma .l,
+.chroma .ld,
+.chroma .s,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .dl,
+.chroma .sd,
+.chroma .s2,
+.chroma .sh,
+.chroma .si,
+.chroma .sx,
+.chroma .s1,
+.chroma .gi,
+.chroma .go,
+.chroma .gp {
   @apply text-primary-800 dark:text-primary-400;
 }
 /* LiteralStringEscape */
 .chroma .se {
   @apply font-semibold text-secondary-400 dark:text-secondary-500;
 }
-/* LiteralStringHeredoc */
-.chroma .sh {
-  @apply text-primary-800 dark:text-primary-400;
-}
-/* LiteralStringInterpol */
-.chroma .si {
-  @apply text-primary-800 dark:text-primary-400;
-}
-/* LiteralStringOther */
-.chroma .sx {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringRegex */
-.chroma .sr {
-  @apply font-semibold text-primary-800 dark:text-primary-400;
-}
-/* LiteralStringSingle */
-.chroma .s1 {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* LiteralStringSymbol */
+.chroma .sr,
 .chroma .ss {
   @apply font-semibold text-primary-800 dark:text-primary-400;
 }
-/* LiteralNumber */
-.chroma .m {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberBin */
-.chroma .mb {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberFloat */
-.chroma .mf {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberHex */
-.chroma .mh {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberInteger */
-.chroma .mi {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberIntegerLong */
-.chroma .il {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberOct */
-.chroma .mo {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-/* Operator */
-.chroma .o {
-  @apply text-primary-600;
-}
 /* OperatorWord */
 .chroma .ow {
   @apply font-semibold text-primary-400 dark:text-primary-600;
 }
-/* Punctuation */
-.chroma .p {
-}
 /* Comment */
-.chroma .c {
+/* CommentMultiline */
+/* CommentSingle */
+/* CommentSpecial */
+/* CommentPreproc */
+/* CommentPreprocFile */
+.chroma .c,
+.chroma .cm,
+.chroma .c1,
+.chroma .cs,
+.chroma .cp,
+.chroma .cpf {
   @apply italic text-neutral-500 dark:text-neutral-400;
 }
 /* CommentHashbang */
 .chroma .ch {
   @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
 }
-/* CommentMultiline */
-.chroma .cm {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentSingle */
-.chroma .c1 {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentSpecial */
-.chroma .cs {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentPreproc */
-.chroma .cp {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentPreprocFile */
-.chroma .cpf {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* Generic */
-.chroma .g {
-}
-/* GenericDeleted */
-.chroma .gd {
-}
 /* GenericEmph */
 .chroma .ge {
   @apply italic;
 }
-/* GenericError */
-.chroma .gr {
-}
 /* GenericHeading */
 .chroma .gh {
   @apply font-semibold text-neutral-500;
 }
-/* GenericInserted */
-.chroma .gi {
-  @apply text-primary-800 dark:text-primary-400;
-}
-/* GenericOutput */
-.chroma .go {
-  @apply text-primary-800 dark:text-primary-400;
-}
-/* GenericPrompt */
-.chroma .gp {
-  @apply text-primary-800 dark:text-primary-400;
-}
 /* GenericStrong */
 .chroma .gs {
   @apply font-semibold;
 }
 /* GenericSubheading */
-.chroma .gu {
-  @apply text-neutral-500;
-}
 /* GenericTraceback */
+.chroma .gu,
 .chroma .gt {
   @apply text-neutral-500;
 }
@@ -401,8 +264,5 @@ body button {
 .chroma .gl {
   @apply underline;
 }
-/* TextWhitespace */
-.chroma .w {
-}
 
 @tailwind utilities;

exampleSite/content/samples/markdown.md

@@ -81,7 +81,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 
 ### Code block indented with four spaces
 
-    <!doctype html>
+    <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="utf-8">
@@ -94,9 +94,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 
 ### Code block with Hugo's internal highlight shortcode
 
-{{< highlight html >}}
+{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
 
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">

layouts/_default/_markup/render-heading.html

@@ -1 +1 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="heading-anchor" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-5 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>