Render bracket references as superscript text

This commit improves markdown rendering to convert reference labels
(e.g., `[1]`) to superscripts, improving document readability without
cluttering the text. This improvement applies documentation of all
scripts and categories.

Changes:

- Implement superscript conversion for reference labels within markdown
  content, ensuring a cleaner presentation of textual references.
- Enable HTML content within markdown, necessary for inserting `<sup>`
  elements due to limitations in `markdown-it`, see
  markdown-it/markdown-it#999 for details.
- Refactor markdown rendering process for improved testability and
  adherence to the Single Responsibility Principle.
- Create `_typography.scss` with font size definitions, facilitating
  better control over text presentation.
- Adjust external URL indicator icon sizing for consistency, aligning
  images with the top of the text to maintain a uniform appearence.
- Use normal font-size explicitly for documentation text to ensure
  consistency.
- Remove text size specification in `markdown-styles` mixin, using `1em`
  for spacing to simplify styling.
- Rename font sizing variables for clarity, distinguishing between
  absolute and relative units.
- Change `font-size-relative-smaller` to be `80%`, browser default for
  `font-size: smaller;` CSS style and use it with `<sup>` elements.
- Improve the logic for converting plain URLs to hyperlinks, removing
  trailing whitespace for cleaner link generation.
- Fix plain URL to hyperlink (autolinking) logic removing trailing
  whitespace from the original markdown content. This was revealed by
  tests after separating its logic.
- Increase test coverage with more tests.
- Add types for `markdown-it` through `@types/markdown-it` package for
  better editor support and maintainability.
- Simplify implementation of adding custom anchor attributes in
  `markdown-it` using latest documentation.

src/presentation/assets/styles/_fonts.scss

@@ -33,12 +33,3 @@
 $font-normal    : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
 $font-artistic  : 'Yesteryear', cursive;
 $font-main      : 'Slabo 27px';
-
-$font-size-smaller  : 14px;
-$font-size-small    : 16px;
-$font-size-normal   : 18px;
-$font-size-large    : 22px;
-$font-size-larger   : 26px;
-$font-size-largest  : 40px;
-
-$font-size-relative-smaller: 85%;

src/presentation/assets/styles/_globals.scss

@@ -6,6 +6,7 @@
 @use "@/presentation/assets/styles/fonts" as *;
 @use "@/presentation/assets/styles/mixins" as *;
 @use "@/presentation/assets/styles/vite-path" as *;
+@use "@/presentation/assets/styles/typography" as *;
 
 * {
     box-sizing: border-box;
@@ -20,5 +21,5 @@ a {
 body {
     background: $color-background;
     font-family: $font-main;
-    font-size: $font-size-normal;
+    font-size: $font-size-absolute-normal;
 }

src/presentation/assets/styles/_mixins.scss

@@ -1,5 +1,6 @@
 @use "@/presentation/assets/styles/colors" as *;
 @use "@/presentation/assets/styles/fonts" as *;
+@use "@/presentation/assets/styles/typography" as *;
 
 @mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
   @media (hover: hover) {
@@ -69,6 +70,11 @@
   list-style: none;
 }
 
+@mixin reset-sup {
+  vertical-align: unset;
+  font-size: unset;
+}
+
 @mixin reset-button {
   margin: 0;
   padding-block: 0;
@@ -93,7 +99,7 @@
 
 @mixin flat-button($disabled: false) {
   @include reset-button;
-  $font-size: $font-size-normal;
+  $font-size: $font-size-absolute-normal;
 
   @if $disabled {
     color: $color-primary-light;

src/presentation/assets/styles/_typography.scss

@@ -0,0 +1,19 @@
+/*
+  This naming convention for font sizes adheres to CSS standards, distinguishing between absolute and relative sizes.
+
+  We prefix each variable with its type (absolute or relative) for clear identification and context.
+*/
+
+// Absolute sizes use the <absolute-size> CSS data type, representing specific, fixed sizes unaffected by the parent element's size.
+// See: https://archive.today/2024.02.02-005228/https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size.
+$font-size-absolute-x-small   : 14px;
+$font-size-absolute-small     : 16px;
+$font-size-absolute-normal    : 18px;
+$font-size-absolute-large     : 22px;
+$font-size-absolute-x-large   : 26px;
+$font-size-absolute-xx-large  : 40px;
+
+// Relative sizes employ the <relative-size> CSS data type, allowing font size adjustments based on the parent element's size.
+// See: https://archive.today/2024.02.02-010054/https://developer.mozilla.org/en-US/docs/Web/CSS/relative-size.
+$font-size-relative-smallest  : 80%; // Common browser standard for `font-size: smaller;`
+$font-size-relative-smaller   : 85%; // Common browser standard for `font-size: smaller;`

src/presentation/assets/styles/main.scss

@@ -1,6 +1,7 @@
 /* This class is not supposed to more than forwarding other styles */
 
 @forward "./fonts";
+@forward "./typography";
 @forward "./media";
 @forward "./colors";
 @forward "./globals";