mirror of
https://github.com/keanuplayz/dotfiles.git
synced 2024-08-15 02:33:12 +00:00
[colorschemes] add a Prism.js theme
This commit is contained in:
parent
03cc0a5221
commit
d0bc803bcc
9 changed files with 323 additions and 7 deletions
|
@ -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
|
||||
|
|
|
@ -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)},
|
||||
}
|
||||
|
|
126
colorschemes/out/prismjs-theme.css
Normal file
126
colorschemes/out/prismjs-theme.css
Normal 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;
|
||||
}
|
||||
|
24
colorschemes/out/variables.css
Normal file
24
colorschemes/out/variables.css
Normal 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;
|
||||
}
|
125
colorschemes/prismjs-theme-src.css
Normal file
125
colorschemes/prismjs-theme-src.css
Normal 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);
|
||||
}
|
14
colorschemes/prismjs-theme.css.py
Executable file
14
colorschemes/prismjs-theme.css.py
Executable 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
8
colorschemes/variables.css.py
Executable 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("}")
|
|
@ -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>
|
||||
|
|
|
@ -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),
|
||||
|
|
Loading…
Reference in a new issue