[colorschemes] add a Prism.js theme

This commit is contained in:
Dmytro Meleshko 2020-09-06 21:28:24 +03:00
parent 03cc0a5221
commit d0bc803bcc
9 changed files with 323 additions and 7 deletions

View file

@ -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

View file

@ -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)},
}

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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);
}

View file

@ -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)

8
colorschemes/variables.css.py Executable file
View file

@ -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("}")

View file

@ -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>

View file

@ -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),