[scripts/markdown2htmldoc] FINALLY COMPLETE MY MARKDOWN THEME

colorschemes/Makefile

@@ -9,7 +9,7 @@ MAKEFLAGS += --no-builtin-rules
 .PHONY: all clean
 
 OUT_DIR := out
-OUT_FILES := iterm.itermcolors kitty.conf vim.vim setvtrgb.txt zsh.zsh termux.properties variables.css prismjs-theme.css vscode-colorCustomizations.json xfce4-terminal.theme
+OUT_FILES := iterm.itermcolors kitty.conf vim.vim setvtrgb.txt zsh.zsh termux.properties variables.css colorscheme.scss prismjs-theme.css vscode-colorCustomizations.json xfce4-terminal.theme
 
 all: $(OUT_DIR) $(addprefix $(OUT_DIR)/,$(OUT_FILES))
 

colorschemes/_theme.py

@@ -3,6 +3,7 @@
 # base16-eighties by Chris Kempson (http://chriskempson.com)
 base16_name = "eighties"
 name = "base16-" + base16_name
+is_dark = True
 base16_colors = [
   "#2d2d2d",  # 0
   "#393939",  # 1

colorschemes/colorscheme.scss.py

@@ -0,0 +1,13 @@
+#!/usr/bin/env python3
+
+# TODO: Prefix the name with an underscore when I rewrite the theme generator,
+# see <https://sass-lang.com/documentation/at-rules/use#partials>.
+
+import _theme as theme
+
+
+print('$is-dark: {};'.format("true" if theme.is_dark else "false"))
+for var_name, color in theme.css_variables.items():
+  print("${}: {};".format(var_name, color))
+print("$base: ({});".format(', '.join(theme.base16_colors)))
+print("$ansi: ({});".format(', '.join(theme.ansi_colors)))

colorschemes/out/colorscheme.scss

@@ -0,0 +1,25 @@
+$is-dark: true;
+$bg: #2d2d2d;
+$fg: #d3d0c8;
+$selection-bg: #515151;
+$selection-fg: #d3d0c8;
+$cursor-bg: #d3d0c8;
+$cursor-fg: #2d2d2d;
+$base-00: #2d2d2d;
+$base-01: #393939;
+$base-02: #515151;
+$base-03: #747369;
+$base-04: #a09f93;
+$base-05: #d3d0c8;
+$base-06: #e8e6df;
+$base-07: #f2f0ec;
+$base-08: #f2777a;
+$base-09: #f99157;
+$base-0A: #ffcc66;
+$base-0B: #99cc99;
+$base-0C: #66cccc;
+$base-0D: #6699cc;
+$base-0E: #cc99cc;
+$base-0F: #d27b53;
+$base: (#2d2d2d, #393939, #515151, #747369, #a09f93, #d3d0c8, #e8e6df, #f2f0ec, #f2777a, #f99157, #ffcc66, #99cc99, #66cccc, #6699cc, #cc99cc, #d27b53);
+$ansi: (#2d2d2d, #f2777a, #99cc99, #ffcc66, #6699cc, #cc99cc, #66cccc, #d3d0c8, #747369, #f2777a, #99cc99, #ffcc66, #6699cc, #cc99cc, #66cccc, #f2f0ec, #f99157, #d27b53, #393939, #515151, #a09f93, #e8e6df);

colorschemes/out/prismjs-theme.css

@@ -14,12 +14,8 @@
 }
 
 .markdown-body pre::-moz-selection,
-.markdown-body pre ::-moz-selection {
-  background-color: #515151;
-  color: #d3d0c8;
-}
-
 .markdown-body pre::selection,
+.markdown-body pre ::-moz-selection,
 .markdown-body pre ::selection {
   background-color: #515151;
   color: #d3d0c8;

colorschemes/prismjs-theme-src.css

@@ -14,12 +14,8 @@
 }
 
 .markdown-body pre::-moz-selection,
-.markdown-body pre ::-moz-selection {
-  background-color: var(--dotfiles-colorscheme-selection-bg);
-  color: var(--dotfiles-colorscheme-selection-fg);
-}
-
 .markdown-body pre::selection,
+.markdown-body pre ::-moz-selection,
 .markdown-body pre ::selection {
   background-color: var(--dotfiles-colorscheme-selection-bg);
   color: var(--dotfiles-colorscheme-selection-fg);

nvim/colors/dotfiles.vim

@@ -293,6 +293,7 @@
   hi! link scssSelectorName cssClassName
   hi! link scssSelectorChar cssClassnameDot
   hi! link scssAmpersand    cssSelectorOp
+  hi! link scssProperty     cssProp
 " }}}
 
 " JavaScript {{{

script-resources/markdown2htmldoc/github-markdown-additions.css

@@ -1,11 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-.markdown-body {
-  max-width: 882px;
-  margin: 0 auto;
-  padding: 32px;
-}

script-resources/markdown2htmldoc/main.js

@@ -33,8 +33,9 @@ parser.add_argument('--output-encoding', {
   help: '(utf-8 by default)',
 });
 
-parser.add_argument('--no-default-stylesheets', {
+parser.add_argument('--theme', {
-  action: argparse.BooleanOptionalAction,
+  choices: ['dotfiles', 'github', 'none'],
+  default: 'dotfiles',
 });
 parser.add_argument('--syntax-theme', {
   choices: [...PRISM_THEMES, 'none', 'dotfiles'],
@@ -70,14 +71,14 @@ let renderedMarkdown = md.render(markdownDocument);
 
 let stylesheetsTexts = [];
 let scriptsTexts = [];
-let syntaxThemeName = null;
+let syntaxThemeName = 'dotfiles';
 
-if (!args.no_default_stylesheets) {
+if (args.theme === 'dotfiles') {
-  syntaxThemeName = 'dotfiles';
+  stylesheetsTexts.push(fs.readFileSync(require.resolve('./themes-out/my.css'), 'utf-8'));
-  stylesheetsTexts.push(
+} else if (args.theme === 'github') {
-    fs.readFileSync(require.resolve('github-markdown-css/github-markdown.css'), 'utf-8'),
+  stylesheetsTexts.push(fs.readFileSync(require.resolve('./themes-out/github.css'), 'utf-8'));
-    fs.readFileSync(require.resolve('./github-markdown-additions.css'), 'utf-8'),
+} else {
-  );
+  syntaxThemeName = 'none';
 }
 
 syntaxThemeName = args.syntax_theme || syntaxThemeName;

script-resources/markdown2htmldoc/markdown-it-header-anchors.js

@@ -1,12 +1,21 @@
 const GithubSlugger = require('github-slugger');
 
+const OCTICON_LINK_ICON_SVG = [
+  // Basically copied from Github's HTML. Also see
+  // <https://stackoverflow.com/a/34249810/12005228>. I wonder what other
+  // attributes can be thrown out to make this image smaller? After all, it is
+  // duplicated for each and every heading.
+  '<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">',
+  '<path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path>',
+  '</svg>',
+].join('');
+
 function markdownItHeaderAnchors(md) {
   let slugger = new GithubSlugger();
 
   let defaultRender =
     md.renderer.rules.heading_open ||
-    ((tokens, idx, options, _env, self) =>
+    ((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
-      self.renderToken(tokens, idx, options));
 
   // eslint-disable-next-line camelcase
   md.renderer.rules.heading_open = (tokens, idx, opts, env, self) => {
@@ -29,7 +38,7 @@ function markdownItHeaderAnchors(md) {
 
     if (innerText.length > 0) {
       let id = md.utils.escapeHtml(slugger.slug(innerText));
-      renderedHeadingOpen += `<a id="${id}" class="anchor" href="#${id}" aria-hidden="true"><span class="octicon octicon-link"></span></a>`;
+      renderedHeadingOpen += `<a id="${id}" class="anchor" href="#${id}" aria-hidden="true">${OCTICON_LINK_ICON_SVG}</a>`;
     }
 
     return renderedHeadingOpen;

script-resources/markdown2htmldoc/package.json

@@ -1,8 +1,12 @@
 {
   "private": true,
+  "scripts": {
+    "theme:build": "sass --no-source-map --style=compressed themes-src/:themes-out/",
+    "theme:watch": "sass --no-source-map --style=compressed --watch themes-src/:themes-out/"
+  },
   "dependencies": {
     "argparse": "^2.0.1",
-    "github-markdown-css": "^4.0.0",
+    "github-markdown-css": "*",
     "github-slugger": "^1.2.1",
     "markdown-it": "12.0.6",
     "markdown-it-emoji": "2.0.0",
@@ -15,6 +19,8 @@
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-node": "*",
     "eslint-plugin-prettier": "3.4.0",
-    "prettier": "2.2.1"
+    "normalize.css": "^8.0.1",
+    "prettier": "2.2.1",
+    "sass": "^1.33.0"
   }
 }

script-resources/markdown2htmldoc/themes-src/github.scss

@@ -0,0 +1,24 @@
+// See also:
+// <https://github.com/primer/css/tree/main/src/markdown>   <-- Nice.
+// <https://github.com/primer/css/tree/main/src/base>
+// <https://github.com/primer/css/blob/main/src/base/typography-base.scss>
+// <https://github.com/primer/css/blob/main/src/base/kbd.scss>
+
+@use '../node_modules/github-markdown-css/github-markdown.css';
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.markdown-body {
+  box-sizing: border-box;
+  min-width: 200px;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px;
+  @media (max-width: 768px - 1px) {
+    padding: 16px;
+  }
+}

script-resources/markdown2htmldoc/themes-src/my.scss

@@ -0,0 +1,472 @@
+// My GLORIOUS theme for rendered Markdown documents (But may come in handy for
+// other projects? Who knows!). Integrated with my colorscheme generators, best
+// paired with my very own syntax highlighting theme. Based on
+// sindresorhus/github-markdown-css[1] and primer/css[2]. By the way, here[3]
+// is the first ever public version of the Markdown styles. Also, GitLab's
+// stylesheet can be found here[4], it supports way more syntactical features.
+//
+// [1]: <https://github.com/sindresorhus/github-markdown-css/blob/1485dd78f5e744ef36e946e5ae44838e3906f9d8/github-markdown.css>
+// [2]: <https://github.com/primer/css/tree/63764f7edd59c5f4949c91e5373471aa8b0d4865>
+// [3]: <https://github.com/primer/primer-markdown/tree/fa1aa995def5b85cfb8f3c414cded8cb6559292c>
+// [4]: <https://gitlab.com/gitlab-org/gitlab/-/blob/7a6e4f24d0d828500a7c7b6eb84973a1b4c35534/app/assets/stylesheets/framework/typography.scss>
+//
+// User-Agent stylesheets (<https://stackoverflow.com/a/6867287/12005228>):
+// Firefox: <https://searchfox.org/mozilla-central/source/layout/style/res/html.css>
+// Chromium: <https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css/html.css>
+//
+// NOTE: This stylesheet makes heavy use of the
+// {margin,padding,border}-{inline,block}-{start,end} rules (apparently they
+// are called CSS Logical Properties[5]), for two reasons:
+//
+// 1. Judging by MDN this might give us not only easy RTL support, but possibly
+// even support for vertical text directions.
+//
+// 2. UA stylesheets also rely on those, so overrides of those end up being
+// more explicit and are shown in the devtools correctly.
+//
+// 3. However, they have pretty bad cross-browser support at the moment, so TODO: remove.
+//
+// [5]: <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties>
+
+@use 'sass:math';
+@use 'sass:color';
+
+// NOTE: GitHub uses an ancient version of normalize.css:
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/normalize.scss>
+@use '../node_modules/normalize.css/normalize.css';
+
+@use '../../../colorschemes/out/colorscheme.scss';
+
+////////////////////////////////////////////////////////////////////////////////
+// CONFIGURATION CONSTANTS AND FUNCTIONS
+////////////////////////////////////////////////////////////////////////////////
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L34-L38>
+$font-default: 'Ubuntu', sans-serif;
+$font-monospace: 'Ubuntu Mono', monospace;
+// https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L29-L32
+$line-height-headings: 1.25;
+$line-height-code-blocks: 1.3;
+$line-height-default: 1.5;
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/typography.scss#L40-L42>
+$font-size-default: 16px;
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/support/variables/misc.scss#L3-L12>
+$border-radius: 4px;
+@function border($width: 1px, $style: solid, $color: colorscheme.$base-02) {
+  @return $width $style $color;
+}
+
+$paragraph-spacing: 1em;
+
+////////////////////////////////////////////////////////////////////////////////
+// MIXINS AND FUNCTIONS
+////////////////////////////////////////////////////////////////////////////////
+
+@mixin clearfix {
+  &::after,
+  &::before {
+    display: table;
+    content: '';
+  }
+  &::after {
+    clear: both;
+  }
+}
+
+@mixin cancel-out-child-margins {
+  & > :first-child {
+    margin-block-start: 0 !important;
+  }
+  & > :last-child {
+    margin-block-end: 0 !important;
+  }
+}
+
+// prettier-ignore
+@mixin margin-block($margin) { margin-block-start: $margin; margin-block-end: $margin; }
+// prettier-ignore
+@mixin margin-inline($margin) { margin-inline-start: $margin; margin-inline-end: $margin; }
+// prettier-ignore
+@mixin padding-block($padding) { padding-block-start: $padding; padding-block-end: $padding; }
+// prettier-ignore
+@mixin padding-inline($padding) { padding-inline-start: $padding; padding-inline-end: $padding; }
+
+////////////////////////////////////////////////////////////////////////////////
+// BASE STYLES
+// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss>
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss>
+////////////////////////////////////////////////////////////////////////////////
+
+// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L1-L4>
+* {
+  box-sizing: border-box;
+}
+
+// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L15-L21>
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L7-L11>
+body {
+  color: colorscheme.$fg;
+  background-color: colorscheme.$bg;
+  font-family: $font-default;
+  font-size: $font-size-default;
+  line-height: $line-height-default;
+  word-wrap: break-word;
+
+  $tab-size: 4;
+  -moz-tab-size: $tab-size;
+  -o-tab-size: $tab-size;
+  tab-size: $tab-size;
+
+  &::-moz-selection,
+  &::selection,
+  & ::-moz-selection,
+  & ::selection {
+    color: colorscheme.$selection-fg;
+    background-color: colorscheme.$selection-bg;
+  }
+}
+
+// Also called `.markdown-body` by GitHub.
+article {
+  min-width: 200px;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px;
+  @media (max-width: 768px - 1px) {
+    padding: 24px;
+  }
+
+  @include clearfix();
+  @include cancel-out-child-margins();
+}
+
+// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/octicons.scss>
+// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/typography-base.scss#L81-L88>
+.octicon {
+  display: inline-block;
+  overflow: visible !important; // Not sure about this.
+  vertical-align: text-bottom;
+  fill: currentColor;
+}
+
+// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L23-L30>
+a {
+  color: colorscheme.$base-0D;
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: underline;
+  }
+
+  // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L35-L44>
+  &:not([href]) {
+    color: unset;
+    text-decoration: none;
+  }
+}
+
+// <https://github.com/primer/css/blob/00f5d87c82f20552eb69773221127490307fca4b/src/base/base.scss#L37-L50>
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L75-L82>
+hr {
+  @include margin-block($paragraph-spacing * 1.5);
+  border: border($width: 0.2em);
+  @include clearfix();
+}
+
+// Set up paragraph margins for paragraphs themselves and other elements that
+// will appear at the top level.
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L63-L73>
+dl,
+details,
+table,
+blockquote,
+ul,
+ol,
+pre,
+p {
+  @include margin-block($paragraph-spacing);
+}
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L84-L98>
+blockquote {
+  @include margin-inline(0);
+  padding-inline-start: 1em;
+  border-inline-start: border($width: 0.25em);
+  @include cancel-out-child-margins();
+}
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/base.scss#L78-L85>
+summary {
+  cursor: pointer;
+}
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/images.scss#L5-L22>
+img {
+  max-width: 100%;
+  // Fixes manually specified widths for images.
+  box-sizing: content-box;
+  background-color: colorscheme.$base-01;
+
+  &[align='left'],
+  &[align='right'] {
+    margin: 0.5em 1.25em;
+  }
+
+  &[align='left'] {
+    margin-left: 0;
+  }
+
+  &[align='right'] {
+    margin-right: 0;
+  }
+}
+
+ins,
+del {
+  text-decoration: none;
+}
+
+ins {
+  color: colorscheme.$base-0B;
+}
+
+del {
+  color: colorscheme.$base-08;
+}
+
+mark {
+  background-color: colorscheme.$base-0A;
+  color: colorscheme.$bg;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// HEADINGS
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/headings.scss>
+////////////////////////////////////////////////////////////////////////////////
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/headings.scss#L5-L15>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-block-start: $paragraph-spacing * 1.5;
+  margin-block-end: $paragraph-spacing * 1;
+  padding-block-end: 0.3em;
+  border-block-end: border();
+  // Make the headers less bold, the default font-weight is 700.
+  font-weight: 600;
+  line-height: $line-height-headings;
+
+  // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/markdown-body.scss#L51-L61>
+  .anchor {
+    float: left;
+    $size: 16px;
+    $offset: 4px;
+    padding-right: $offset;
+    margin-left: -($size + $offset);
+
+    // Undo the default styles for links.
+    color: unset;
+    &:hover {
+      text-decoration: none;
+    }
+    &:focus {
+      outline: none;
+    }
+
+    > * {
+      visibility: hidden;
+      vertical-align: middle;
+    }
+  }
+
+  &:hover .anchor {
+    > * {
+      visibility: visible;
+    }
+  }
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.25em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: 0.875em;
+}
+
+h6 {
+  font-size: 0.85em;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// CODE
+// <https://github.com/primer/css/blob/39274b353b6bfc43016c23599076bc3e03f0c1c1/src/markdown/code.scss>
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/typography-base.scss#L65-L79>
+////////////////////////////////////////////////////////////////////////////////
+
+code,
+kbd,
+samp,
+pre {
+  font-family: $font-monospace;
+}
+
+// Inline code snippets.
+code {
+  @include padding-block(0.2em);
+  @include padding-inline(0.3em);
+  background-color: rgba(colorscheme.$base-03, 0.2);
+  border-radius: $border-radius;
+}
+
+// Code blocks.
+pre {
+  padding: 1em;
+  overflow: auto;
+  color: colorscheme.$fg;
+  background-color: colorscheme.$bg;
+  border: border();
+  border-radius: $border-radius;
+  line-height: $line-height-code-blocks;
+  word-wrap: normal;
+
+  // Undo the highlighting of inline snippets.
+  code {
+    padding: unset;
+    background-color: unset;
+    border: unset;
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// KEYBOARD SHORTCUTS
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/kbd.scss>
+////////////////////////////////////////////////////////////////////////////////
+
+kbd {
+  display: inline-block;
+  @include padding-block(0.2em);
+  @include padding-inline(0.3em);
+  vertical-align: bottom;
+
+  // The original stylesheet specifies both font-size and line-height in
+  // pixels, but I want to do the same in relative units instead, so
+  // recalculating everything proportionally.
+  $orig-font-size: /* 11px */ 12px;
+  $orig-line-height: 10px;
+  $rel-font-size: math.div($orig-font-size, 16px) * 1em;
+  $rel-line-height: math.div($orig-line-height, $orig-font-size);
+  // This rule implicitly resets all inherited font-related properties.
+  font: #{$rel-font-size}/#{$rel-line-height} #{$font-monospace};
+
+  $kbd-bg-color: if(colorscheme.$is-dark, colorscheme.$bg, colorscheme.$fg);
+  $kbd-fg-color: if(colorscheme.$is-dark, colorscheme.$fg, colorscheme.$bg);
+
+  color: $kbd-fg-color;
+  background-color: color.change($kbd-bg-color, $lightness: 10%);
+  border: border($width: 0.1em, $color: color.change($kbd-bg-color, $lightness: 5%));
+  border-bottom-width: 0.4em;
+  border-radius: $border-radius;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// TABLES
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss>
+////////////////////////////////////////////////////////////////////////////////
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/tables.scss#L4-L35>
+table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+  // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/base/base.scss#L56-L59>
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  // For browsers with support for `max-content`. Not sure what this pair of
+  // rules does differently from just `width: 100%`.
+  width: max-content;
+  max-width: 100%;
+}
+
+th {
+  font-weight: 600;
+}
+
+td,
+th {
+  @include padding-block(0.4em);
+  @include padding-inline(0.75em);
+  border: border();
+}
+
+tr:nth-child(2n) {
+  background-color: rgba(colorscheme.$base-02, 0.1);
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// LISTS
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss>
+////////////////////////////////////////////////////////////////////////////////
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L5-L9>
+ol,
+ul {
+  padding-inline-start: 2em;
+
+  // Disable the "paragraph" margins for nested lists.
+  // <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L17-L46>
+  & & {
+    @include margin-block(0);
+  }
+}
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L52-L54>
+li {
+  @include margin-block($paragraph-spacing * 0.25);
+}
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L59-L65>
+dt {
+  margin-block-start: $paragraph-spacing;
+  font-weight: 600;
+  font-style: italic;
+}
+
+// <https://github.com/primer/css/blob/63764f7edd59c5f4949c91e5373471aa8b0d4865/src/markdown/lists.scss#L67-L70>
+dd {
+  margin-block-end: $paragraph-spacing;
+  margin-inline-start: 1em;
+}
+
+// Apparently not available in Primer? Had to copy from the extracted
+// production stylesheets.
+// <https://github.com/primer/css/issues/1149>
+// <https://gitlab.com/gitlab-org/gitlab/-/blob/7a6e4f24d0d828500a7c7b6eb84973a1b4c35534/app/assets/stylesheets/framework/typography.scss#L403-417>
+ul > li.task-list-item {
+  list-style-type: none;
+  input[type='checkbox']:first-child {
+    margin: 0 0.2em 0.25em -1.6em;
+    vertical-align: middle;
+  }
+}
+
+////////////////////////////////////////////////////////////////////////////////

script-resources/markdown2htmldoc/yarn.lock

@@ -92,6 +92,14 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+anymatch@~3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -114,6 +122,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -122,6 +135,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -144,6 +164,21 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.3.1"
+
 clipboard@^2.0.0:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
@@ -416,6 +451,13 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -434,6 +476,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+fsevents@~2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -444,7 +491,7 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-github-markdown-css@^4.0.0:
+github-markdown-css@*:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-4.0.0.tgz#be9f4caf7a389228d4c368336260ffc909061f35"
   integrity sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==
@@ -456,7 +503,7 @@ github-slugger@^1.2.1:
   dependencies:
     emoji-regex ">=6.0.0 <=6.1.1"
 
-glob-parent@^5.0.0:
+glob-parent@^5.0.0, glob-parent@~5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -549,6 +596,13 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-core-module@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.3.0.tgz#d341652e3408bca69c4671b79a0954a3d349f887"
@@ -566,13 +620,18 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.0, is-glob@^4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
   integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
   dependencies:
     is-extglob "^2.1.1"
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -686,6 +745,16 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -727,6 +796,11 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
+  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -761,6 +835,13 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+readdirp@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 regexpp@^3.0.0, regexpp@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
@@ -791,6 +872,13 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+sass@^1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.33.0.tgz#a26186902ee56585b9db6751fd151237f561dbc2"
+  integrity sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
@@ -891,6 +979,13 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"