feat: WIP hacking my way to port signature API

Author: MangelMaxime

Directory.Packages.props

@@ -9,6 +9,7 @@
     <PackageVersion Include="FSharp.Core" Version="[8.0.100]" />
     <PackageVersion Include="FSharp.Compiler.Service" Version="[43.8.100]" />
     <PackageVersion Include="CommandLineParser" Version="2.9.1" />
+    <PackageVersion Include="Markdig" Version="0.37.0" />
     <PackageVersion Include="Microsoft.Build" Version="" PrivateAssets="all" />
     <PackageVersion Include="Microsoft.Build.Framework" Version="" PrivateAssets="all" />
     <PackageVersion Include="Microsoft.Build.Utilities.Core" Version="" PrivateAssets="all" />

docs/_template.html

@@ -25,6 +25,16 @@
     <script type="application/javascript" src="{{root}}content/fsdocs-details-set-expanded.js"></script>
     <link href="{{root}}content/fsdocs-default.css" rel="stylesheet" type="text/css"/>
     <link href="{{root}}content/fsdocs-theme.css" rel="stylesheet" type="text/css"/>
+    <!-- Load prism.js -->
+    <!-- 
+        TODO:
+        We probably want to add the auto-loader plugin to make the initial prism.js as small as possible
+        This plugin allows to load language on demand, right now I loaded the most default languages from prism.js
+        and the ones supported by Fable.
+        markup+css+clike+javascript+dart+fsharp+python+rust
+    -->
+    <link href="{{root}}content/prism/prism.css" rel="stylesheet" type="text/css"/>
+    <script type="module" src="{{root}}content/prism/prism.js"></script>
     {{fsdocs-head-extra}}
     {{fsdocs-watch-script}}
 </head>

docs/content/fsdocs-default.css

@@ -122,6 +122,7 @@
     --code-preprocessor-color: #af75c1;
     --code-fsioutput-color: #808080;
     --code-tooltip-color: #d1d1d1;
+
 }
 
 /* dark theme */
@@ -671,7 +672,10 @@ a {
 
 p {
     line-height: 1.8;
-    margin-top: var(--spacing-300);
+    
+    &:not(:last-child) {
+        margin-bottom: var(--spacing-300);
+    }
 }
 
 ol, ul {
@@ -713,23 +717,20 @@ blockquote {
 /* Code snippets */
 
 /* reset browser style */
-pre {
-    margin: 0;
-    padding: 0;
-}
+
 
 code, table.pre, pre {
     background-color: var(--code-background);
     color: var(--code-color);
-    font-family: var(--monospace-font);
+    font-family: var(--monospace-font); 
     font-variant-ligatures: none;
     font-size: var(--font-200);
     -webkit-text-size-adjust: 100%;
 }
 
 h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
     font-size: inherit;
-}
+}  
 
 table.pre, #content > pre.fssnip {
     border: 1px solid var(--code-fence-border-color);
@@ -1062,20 +1063,11 @@ span[onmouseout] {
                 flex-grow: 1;
             }
 
-            & pre {
-                margin-bottom: var(--spacing-200);
-                padding: var(--spacing-50);
-                flex-grow: 1;
-                overflow-x: auto;
-            }
         }
     }
 
     .fsdocs-summary-contents {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
+        width: 100%;
     }
 
     .fsdocs-member-xmldoc-column {
@@ -1286,3 +1278,67 @@ dialog {
         opacity: 0.75;
     }
 }
+
+
+
+
+
+/* Code */
+
+.fsdocs-api-code {
+    font-family: var(--monospace-font);
+    margin-bottom: 1rem;
+    scroll-margin-top: 5.25rem;
+
+    pre {
+        background-color: transparent;
+    }
+
+    .line {
+        white-space: nowrap;
+    }
+
+    a.record-field-name,
+    a.union-case-property,
+    a.property {
+        /* color: darken($primary, 4%); */
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    span.property {
+        /* color: darken($primary, 4%); */
+    }
+
+    @keyframes blink {
+        0% {
+            background-color: lighten($primary, 4%);
+            color: $white;
+        }
+        100% {
+            background-color: transparent;
+            color: $link;
+        }
+    }
+
+    .property[id],
+    a[id] {
+        &:target {
+            animation-name: blink;
+            animation-direction: normal;
+            animation-duration: 0.75s;
+            animation-iteration-count: 2;
+            animation-timing-function: ease;
+        }
+    }
+
+    .keyword {
+        color: var(--code-keywords-color);
+    }
+
+    .type {
+        color: var(--code-reference-color);
+    }
+}