Improve UI code styling for all platforms

This commit standardizes the visual styling of inline code and code
blocks, ensuring consistency across macOS, Android, Linux and Windows
platforms.

The discrepancies observed in font rendering on macOS, which caused the
inline code font to appear larger, have been addressed. This behavior
was only observed on macOS using different browsers such as Firefox,
Safari, Chromium-based browsers including Electron.

Key changes:

- Standardize font size relative to the parent element.
- Remove font-weight for uniformity, especially when the specific weight
  is not included with the application.
- Add a consistent background color to inline codes, aligning their look
  with code blocks.
- Refactor code styling into a separate SCSS file for improved
  modularity and maintainability.
- Update the documentation to reflect these visual design choices for
  privacy.sexy's UI.

These changes enhance the overall user experience by providing a
consistent look and feel for code elements within the UI, regardless of
the user's platform or browser.

src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss

@@ -1,24 +1,7 @@
 @use "@/presentation/assets/styles/main" as *;
+@use "_code-styling" as *;
 @use 'sass:math';
 
-@mixin code-block() {
-  pre {
-    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
-  }
-}
-
-@mixin inline-code() {
-  :not(pre) > code {
-    @content;
-  }
-}
-
-@mixin code() {
-  code {
-    @content;
-  }
-}
-
 @mixin no-margin($selectors) {
   #{$selectors} {
     margin: 0;
@@ -110,21 +93,6 @@
     }
   }
 
-  @include code {
-    font-family: $font-normal;
-    font-weight: 600;
-  }
-  
-  @include inline-code {
-    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
-  }
-  
-  @include code-block {
-    padding: $base-spacing;
-    background: $color-primary-darker;
-    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
-  }
-
   @include apply-uniform-vertical-spacing($base-spacing);
   @include apply-uniform-horizontal-spacing($base-spacing);
 
@@ -140,4 +108,9 @@
     padding: 0 $base-spacing;
     border-left: .25em solid $color-primary;
   }
+
+  @include style-code-elements(
+    $code-block-padding: $base-spacing,
+    $color-background: $color-primary-darker,
+  );
 }