[colorschemes] add a Prism.js 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
+OUT_FILES := iterm.itermcolors kitty.conf vim.vim setvtrgb.txt zsh.zsh termux.properties variables.css prismjs-theme.css
 
 all: $(OUT_DIR) $(addprefix $(OUT_DIR)/,$(OUT_FILES))
 
@@ -19,5 +19,7 @@ clean:
 out:
 	mkdir -p $@
 
-$(OUT_DIR)/%: %.py
+$(OUT_DIR)/%: %.py _theme.py
 	./$< > $@
+
+$(OUT_DIR)/prismjs-theme.css: prismjs-theme-src.css

colorschemes/_theme.py

@@ -37,3 +37,14 @@ ansi_colors = [
 ]
 
 link_color = ansi_colors[0xC]
+
+css_variables_prefix = "dotfiles-colorscheme-"
+css_variables = {
+    "bg": bg,
+    "fg": fg,
+    "selection-bg": selection_bg,
+    "selection-fg": selection_fg,
+    "cursor-bg": cursor_bg,
+    "cursor-fg": cursor_fg,
+    **{"base-{:02X}".format(index): color for index, color in enumerate(base16_colors)},
+}

colorschemes/out/prismjs-theme.css

@@ -0,0 +1,126 @@
+/* Based on <https://github.com/PrismJS/prism/blob/master/themes/prism.css> */
+
+.markdown-body code,
+.markdown-body pre {
+  font-family: 'Ubuntu Mono', monospace;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+
+.markdown-body pre {
+  background-color: #2d2d2d;
+  color: #d3d0c8;
+}
+
+.markdown-body pre::-moz-selection,
+.markdown-body pre ::-moz-selection {
+  background-color: #515151;
+  color: #d3d0c8;
+}
+
+.markdown-body pre::selection,
+.markdown-body pre ::selection {
+  background-color: #515151;
+  color: #d3d0c8;
+}
+
+.token.symbol {
+  color: #905;
+}
+
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.url {
+  text-decoration: underline;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.attr-equals,
+.token.punctuation,
+.token.operator,
+.token.combinator {
+  color: #d3d0c8;
+}
+
+.token.comment,
+.token.doctype,
+.token.doctype > .token.punctuation,
+.token.cdata,
+.token.cdata > .token.punctuation,
+.token.prolog,
+.token.blockquote,
+.token.hr {
+  color: #747369;
+}
+
+.token.variable,
+.token.parameter,
+.token.constant,
+.token.tag,
+.token.property,
+.token.deleted,
+.token.selector {
+  color: #f2777a;
+}
+
+.token.boolean,
+.token.number,
+.token.unit,
+.token.attr-name,
+.token.color.hexcode,
+.token.list {
+  color: #f99157;
+}
+
+.token.class-name,
+.token.maybe-class-name,
+.token.builtin,
+.token.variable.dom,
+.token.macro,
+.token.interpolation-punctuation,
+.language-json .token.property {
+  color: #ffcc66;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.attr-value > .token.punctuation:not(.attr-equals),
+.token.inserted {
+  color: #99cc99;
+}
+
+.token.regex,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.entity,
+.token.important {
+  color: #66cccc;
+}
+
+.token.function,
+.token.coord,
+.token.url,
+.token.heading,
+.token.title,
+.token.heading > .token.important,
+.token.title > .token.punctuation {
+  color: #6699cc;
+}
+
+.token.keyword,
+.token.operator.arrow,
+.token.rule {
+  color: #cc99cc;
+}
+

colorschemes/out/variables.css

@@ -0,0 +1,24 @@
+:root {
+  --dotfiles-colorscheme-bg: #2d2d2d;
+  --dotfiles-colorscheme-fg: #d3d0c8;
+  --dotfiles-colorscheme-selection-bg: #515151;
+  --dotfiles-colorscheme-selection-fg: #d3d0c8;
+  --dotfiles-colorscheme-cursor-bg: #d3d0c8;
+  --dotfiles-colorscheme-cursor-fg: #2d2d2d;
+  --dotfiles-colorscheme-base-00: #2d2d2d;
+  --dotfiles-colorscheme-base-01: #393939;
+  --dotfiles-colorscheme-base-02: #515151;
+  --dotfiles-colorscheme-base-03: #747369;
+  --dotfiles-colorscheme-base-04: #a09f93;
+  --dotfiles-colorscheme-base-05: #d3d0c8;
+  --dotfiles-colorscheme-base-06: #e8e6df;
+  --dotfiles-colorscheme-base-07: #f2f0ec;
+  --dotfiles-colorscheme-base-08: #f2777a;
+  --dotfiles-colorscheme-base-09: #f99157;
+  --dotfiles-colorscheme-base-0A: #ffcc66;
+  --dotfiles-colorscheme-base-0B: #99cc99;
+  --dotfiles-colorscheme-base-0C: #66cccc;
+  --dotfiles-colorscheme-base-0D: #6699cc;
+  --dotfiles-colorscheme-base-0E: #cc99cc;
+  --dotfiles-colorscheme-base-0F: #d27b53;
+}

colorschemes/prismjs-theme-src.css

@@ -0,0 +1,125 @@
+/* Based on <https://github.com/PrismJS/prism/blob/master/themes/prism.css> */
+
+.markdown-body code,
+.markdown-body pre {
+  font-family: 'Ubuntu Mono', monospace;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+
+.markdown-body pre {
+  background-color: var(--dotfiles-colorscheme-bg);
+  color: var(--dotfiles-colorscheme-fg);
+}
+
+.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 ::selection {
+  background-color: var(--dotfiles-colorscheme-selection-bg);
+  color: var(--dotfiles-colorscheme-selection-fg);
+}
+
+.token.symbol {
+  color: #905;
+}
+
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.url {
+  text-decoration: underline;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.attr-equals,
+.token.punctuation,
+.token.operator,
+.token.combinator {
+  color: var(--dotfiles-colorscheme-fg);
+}
+
+.token.comment,
+.token.doctype,
+.token.doctype > .token.punctuation,
+.token.cdata,
+.token.cdata > .token.punctuation,
+.token.prolog,
+.token.blockquote,
+.token.hr {
+  color: var(--dotfiles-colorscheme-base-03);
+}
+
+.token.variable,
+.token.parameter,
+.token.constant,
+.token.tag,
+.token.property,
+.token.deleted,
+.token.selector {
+  color: var(--dotfiles-colorscheme-base-08);
+}
+
+.token.boolean,
+.token.number,
+.token.unit,
+.token.attr-name,
+.token.color.hexcode,
+.token.list {
+  color: var(--dotfiles-colorscheme-base-09);
+}
+
+.token.class-name,
+.token.maybe-class-name,
+.token.builtin,
+.token.variable.dom,
+.token.macro,
+.token.interpolation-punctuation,
+.language-json .token.property {
+  color: var(--dotfiles-colorscheme-base-0A);
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.attr-value > .token.punctuation:not(.attr-equals),
+.token.inserted {
+  color: var(--dotfiles-colorscheme-base-0B);
+}
+
+.token.regex,
+.token.pseudo-class,
+.token.pseudo-element,
+.token.entity,
+.token.important {
+  color: var(--dotfiles-colorscheme-base-0C);
+}
+
+.token.function,
+.token.coord,
+.token.url,
+.token.heading,
+.token.title,
+.token.heading > .token.important,
+.token.title > .token.punctuation {
+  color: var(--dotfiles-colorscheme-base-0D);
+}
+
+.token.keyword,
+.token.operator.arrow,
+.token.rule {
+  color: var(--dotfiles-colorscheme-base-0E);
+}

colorschemes/prismjs-theme.css.py

@@ -0,0 +1,14 @@
+#!/usr/bin/env python3
+
+import _theme as theme
+import os
+
+with open(os.path.join(os.path.dirname(__file__), "prismjs-theme-src.css")) as f:
+    css_src = f.read()
+
+for var_name, color in theme.css_variables.items():
+    css_src = css_src.replace(
+        "var(--{}{})".format(theme.css_variables_prefix, var_name), color
+    )
+
+print(css_src)

colorschemes/variables.css.py

@@ -0,0 +1,8 @@
+#!/usr/bin/env python3
+
+import _theme as theme
+
+print(":root {")
+for var_name, color in theme.css_variables.items():
+    print("  --{}{}: {};".format(theme.css_variables_prefix, var_name, color))
+print("}")

nvim/after/ftplugin/markdown.vim

@@ -6,3 +6,5 @@ let &l:makeprg = 'markdown2htmldoc '.shellescape(s:src_file).' '.shellescape(s:o
 for s:arg in get(g:, 'dotfiles_markdown2htmldoc_options', [])
   let &l:makeprg .= ' '.shellescape(s:arg)
 endfor
+
+nnoremap <buffer> <F5> <Cmd>Open %.html<CR>

script-resources/markdown2htmldoc/main.js

@@ -39,7 +39,7 @@ parser.addArgument('--no-default-stylesheets', {
   nargs: argparse.Const.SUPPRESS,
 });
 parser.addArgument('--syntax-theme', {
-  choices: PRISM_THEMES,
+  choices: [...PRISM_THEMES, 'none', 'dotfiles'],
 });
 
 parser.addArgument('--stylesheet', {
@@ -78,7 +78,7 @@ let scriptsTexts = [];
 let syntaxThemeName = null;
 
 if (!args.get('no_default_stylesheets')) {
-  syntaxThemeName = 'prism';
+  syntaxThemeName = 'dotfiles';
   stylesheetsTexts.push(
     fs.readFileSync(
       require.resolve('github-markdown-css/github-markdown.css'),
@@ -92,10 +92,14 @@ if (!args.get('no_default_stylesheets')) {
 }
 
 syntaxThemeName = args.get('syntax_theme') || syntaxThemeName;
-if (syntaxThemeName) {
+if (syntaxThemeName && syntaxThemeName !== 'none') {
   stylesheetsTexts.push(
     fs.readFileSync(
-      require.resolve(`prismjs/themes/${syntaxThemeName}.css`),
+      require.resolve(
+        syntaxThemeName === 'dotfiles'
+          ? '../../colorschemes/out/prismjs-theme.css'
+          : `prismjs/themes/${syntaxThemeName}.css`,
+      ),
       'utf-8',
     ),
   );
@@ -125,7 +129,7 @@ ${renderedMarkdown}
 ${scriptsTexts.map((s) => `<script>\n${s}\n</script>`).join('\n')}
 </body>
 </html>
-`;
+`.trim();
 
 fs.writeFileSync(
   args.get('OUTPUT_FILE', 1),