[WIP] Add support for ANSI colors

This changes:
- add support for a keyword argument `ansicolor` in the `@example`/`@repl` block
  - for per-block setting to overide the default setting
  - the default uses the `:color` property of `stdout` (determined by `--color`)
- use the `ansicolor` option for the `:color` property of output
- translate "text/plain" output with ANSI escape codes in `HTMLWriter`
- add styles for ANSI colors to the default themes

Project.toml

@@ -3,6 +3,7 @@ uuid = "e30172f5-a6a5-5a46-863b-614d45cd2de4"
 version = "0.27.3"
 
 [deps]
+ANSIColoredPrinters = "a4c015fc-c6ff-483c-b24f-f7ea428134e9"
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
 DocStringExtensions = "ffbed154-4ef7-542d-bbb7-c09d3a79fcae"
@@ -17,6 +18,7 @@ Test = "8dfed614-e22c-5e08-85e1-65c5234f0b40"
 Unicode = "4ec0a83e-493e-50e2-b9ac-8f72acf5a8f5"
 
 [compat]
+ANSIColoredPrinters = "0.0.1"
 DocStringExtensions = "0.4, 0.5, 0.6, 0.7, 0.8"
 IOCapture = "0.2"
 JSON = "0.19, 0.20, 0.21"

assets/html/scss/documenter-dark.scss

@@ -91,6 +91,8 @@ html.theme--#{$themename} {
   //   }
   // }
 
+  @import "documenter/ansicolors";
+
   // FIXME: Hack to get a proper theme for highlight.js in the Darkly theme
   @import "highlightjs/a11y-dark";
   // Also, a11y-dark does not highlight string interpolation properly.

assets/html/scss/documenter-light.scss

@@ -19,6 +19,8 @@
 @import "documenter/patches";
 @import "documenter/layout/all";
 
+@import "documenter/ansicolors";
+
 // Workaround to compile in highlightjs theme, so that we could have different
 // themes for both
 @import "highlightjs/default"

assets/html/scss/documenter/_ansicolors.scss

@@ -0,0 +1,216 @@
+$ansi-black: $black-ter !default;
+$ansi-red: null !default;
+$ansi-green: null !default;
+$ansi-yellow: null !default;
+$ansi-blue: null !default;
+$ansi-magenta: null !default;
+$ansi-cyan: null !default;
+$ansi-white: $grey-lighter !default;
+
+$ansi-light-black: null !default;
+$ansi-light-red: null !default;
+$ansi-light-green: null !default;
+$ansi-light-yellow: null !default;
+$ansi-light-blue: null !default;
+$ansi-light-magenta: null !default;
+$ansi-light-cyan: null !default;
+$ansi-light-white: $white-ter !default;
+
+@if $documenter-is-dark-theme {
+  $ansi-red: $red !default;
+  $ansi-green: $green !default;
+  $ansi-yellow: $yellow !default;
+  $ansi-blue: $blue !default;
+  $ansi-magenta: $purple !default;
+  $ansi-cyan: $turquoise !default;
+
+  $ansi-light-black: $grey-light !default;
+
+  $ansi-light-red: lighten($ansi-red, 15) !default;
+  $ansi-light-green: lighten($ansi-green, 15) !default;
+  $ansi-light-yellow: lighten($ansi-yellow, 10) !default;
+  $ansi-light-blue: lighten($ansi-blue, 15) !default;
+  $ansi-light-magenta: lighten($ansi-magenta, 10) !default;
+  $ansi-light-cyan: lighten($ansi-cyan, 15) !default;
+}
+
+@else {
+  $ansi-light-red: $red !default;
+  $ansi-light-green: $green !default;
+  $ansi-light-yellow: $yellow !default;
+  $ansi-light-blue: $blue !default;
+  $ansi-light-magenta: $purple !default;
+  $ansi-light-cyan: $turquoise !default;
+
+  $ansi-light-black: $grey !default;
+
+  $ansi-red: darken($ansi-light-red, 10) !default;
+  $ansi-green: darken($ansi-light-green, 10) !default;
+  $ansi-yellow: darken($ansi-light-yellow, 18) !default;
+  $ansi-blue: darken($ansi-light-blue, 10) !default;
+  $ansi-magenta: darken($ansi-light-magenta, 15) !default;
+  $ansi-cyan: darken($ansi-light-cyan, 10) !default;
+}
+
+.ansi span {
+  &.sgr1 {
+    font-weight: bolder;
+  }
+
+  &.sgr2 {
+    font-weight: lighter;
+  }
+
+  &.sgr3 {
+    font-style: italic;
+  }
+
+  &.sgr4 {
+    text-decoration: underline;
+  }
+
+  &.sgr7 {
+    color: $body-background-color;
+    background-color: $text;
+  }
+
+  &.sgr8 {
+    color: transparent;
+
+    span {
+      color: transparent;
+    }
+  }
+
+  &.sgr9 {
+    text-decoration: line-through;
+  }
+
+  &.sgr30 {
+    color: $ansi-black;
+  }
+
+  &.sgr31 {
+    color: $ansi-red;
+  }
+
+  &.sgr32 {
+    color: $ansi-green;
+  }
+
+  &.sgr33 {
+    color: $ansi-yellow;
+  }
+
+  &.sgr34 {
+    color: $ansi-blue;
+  }
+
+  &.sgr35 {
+    color: $ansi-magenta;
+  }
+
+  &.sgr36 {
+    color: $ansi-cyan;
+  }
+
+  &.sgr37 {
+    color: $ansi-white;
+  }
+
+  &.sgr40 {
+    background-color: $ansi-black;
+  }
+
+  &.sgr41 {
+    background-color: $ansi-red;
+  }
+
+  &.sgr42 {
+    background-color: $ansi-green;
+  }
+
+  &.sgr43 {
+    background-color: $ansi-yellow;
+  }
+
+  &.sgr44 {
+    background-color: $ansi-blue;
+  }
+
+  &.sgr45 {
+    background-color: $ansi-magenta;
+  }
+
+  &.sgr46 {
+    background-color: $ansi-cyan;
+  }
+
+  &.sgr47 {
+    background-color: $ansi-white;
+  }
+
+  &.sgr90 {
+    color: $ansi-light-black;
+  }
+
+  &.sgr91 {
+    color: $ansi-light-red;
+  }
+
+  &.sgr92 {
+    color: $ansi-light-green;
+  }
+
+  &.sgr93 {
+    color: $ansi-light-yellow;
+  }
+
+  &.sgr94 {
+    color: $ansi-light-blue;
+  }
+
+  &.sgr95 {
+    color: $ansi-light-magenta;
+  }
+
+  &.sgr96 {
+    color: $ansi-light-cyan;
+  }
+
+  &.sgr97 {
+    color: $ansi-light-white;
+  }
+
+  &.sgr100 {
+    background-color: $ansi-light-black;
+  }
+
+  &.sgr101 {
+    background-color: $ansi-light-red;
+  }
+
+  &.sgr102 {
+    background-color: $ansi-light-green;
+  }
+
+  &.sgr103 {
+    background-color: $ansi-light-yellow;
+  }
+
+  &.sgr104 {
+    background-color: $ansi-light-blue;
+  }
+
+  &.sgr105 {
+    background-color: $ansi-light-magenta;
+  }
+
+  &.sgr106 {
+    background-color: $ansi-light-cyan;
+  }
+
+  &.sgr107 {
+    background-color: $ansi-light-white;
+  }
+}