From 06d7ea4c9aff371add98ad63885a12cb71e3ed5d Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sat, 18 Sep 2021 05:00:32 +0800 Subject: [PATCH 01/14] Create contributing doc and theme template Co-Authored-By: Michael Schmidt --- CONTRIBUTING.md | 231 ++++++++++++++++++++ prism-theme-template.css | 440 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 671 insertions(+) create mode 100644 CONTRIBUTING.md create mode 100644 prism-theme-template.css diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..d6a919d --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,231 @@ +# Contributing to Prism Themes + +Thank you for coming on board! + +There are a few ways you can contribute to Prism Themes, such as: + +- [Filing bug reports](#filing-bug-reports) +- [Discussing the project](#discussing-the-project) +- [Submitting Pull Requests](#submitting-pull-requests), whether it's for documentation or code +- [Creating new themes](#creating-new-themes) + +## Filing bug reports + +If you run into an error or a bug while using a theme from this repository: + +1. Confirm that the bug lies with the theme and not Prism or one of its plugins. You can check by swapping the theme out for another theme. If the issue lies with Prism or one of its plugins, please head over to the [main repository](https://github.com/PrismJS/prism) instead. + - In addition, please be sure that you only have one theme loaded! Having multiple themes loaded may result in conflicting or unexpected styles. + +2. Check [existing issues (both open and closed)](https://github.com/PrismJS/prism-themes/issues?q=is%3Aissue) to see if it had previously been reported and/or resolved. If an existing issue exists, please leave a comment on it instead of creating a new issue. + +3. [Open a new issue](https://github.com/PrismJS/prism-themes/issues/new/choose) with a clear and concise title, and include any relevant information such as: + - The name of the theme you're having an issue with + - Any plugins that you're using, if applicable + - Screenshots and/or a reproducible sample + - Browser information + +### Security issues + +In particular, if you discover a security issue, please **do not** file a public issue, and instead, send a report privately to **insert email here**, and we will correspond with you from there. + +## Discussing the project + +Perhaps you have some thoughts on Prism Themes, whether it's the state of the code, documentation, features you think might be useful, or simply want to know when the next release will be because you really like the latest theme and want to use it! Please [open a new issue](https://github.com/PrismJS/prism-themes/issues/new/choose) and let us know! + +## Submitting Pull Requests + +Whether it's documentation or code, Prism Themes welcomes Pull Requests! (If you're specifically looking to contribute a brand new theme, the next section on [Creating new themes](#creating-new-themes) would be more relevant.) + +1. Fork this repository and create a new branch. It is possible that you do not have to clone it to your machine if you do not have to regenerate theme screenshots. If you need help at any point, please reach out! + +2. Make the changes. + +3. Commit the changes, and include clear and concise commit messages when doing so. + +4. Once you're done making the changes, [submit a Pull Request](https://github.com/PrismJS/prism-themes/compare)! + - If your Pull Request resolves an open issue (or more), please include `closes #issuenumber` (for each issue) in the description. + +5. A maintainer will look through your changes and review them accordingly, providing further instructions where necessary. + +Thank you for submitting a Pull Request! We really appreciate the time and effort you've put into it :) + +## Creating new themes + +Prism themes are CSS files that set rules for inline code, code blocks, and the tokens within them. We have a [theme template](prism-theme-template.css) you may want to use as a starting point, as it provides additional tips and details beyond what is stated here. Additionally, when designing your theme, please make sure that the [theme guidelines and requirements](#theme-guidelines-and-requirements) are adhered to. + +### How to style... + +#### Tokens + +To style a token, you can use a selector like: + +```css +.token.token-name { + /* styles */ +} +``` + +While we have some [resources](#resources) for discovering tokens available in each language, we unfortunately do not currently have documentation for what sort of code each token targets/captures in general. But if you think you can help with that, we would really appreciate your assistance with some [documentation over at the main repository](https://github.com/PrismJS/prism/issues?q=is%3Aopen+is%3Aissue+label%3Adocs)! + +##### Is there a comprehensive list of tokens to style? + +We're glad you asked! Prism has quite a few tokens, but until we can get the token docs sorted out, we do not have such a list. However, covering the most common tokens should be enough for most cases, and the names of these tokens are documented in the [theme template](prism-theme-template.css). + +#### Tokens for a specific language + +Perhaps you want a particular token to be styled differently in a certain language. For example, CSS uses `.important` to style `!important`, while Markdown uses the same token in its headings, and you want them to have different styles. You can achieve it with the following selectors: + +```css +/* Tokens with the `.important` class */ +.token.important { + /* styles */ +} + +/* Tokens in a CSS block with the `.important` class */ +.language-css .token.important { + /* styles */ +} + +/* Tokens in a Markdown block with the `.important` class */ +.language-markdown .token.important { + /* styles */ +} +``` + +### Code style guidelines + +The most important one is that Prism uses [tabs for indentation and spaces for alignment](https://lea.verou.me/2012/01/why-tabs-are-clearly-superior/). For the rest, just run `npm run lint` to check (and `npm run lint-fix` to fix)! + +### Theme guidelines and requirements + +Your theme will be used by Prism and its plugins, which have default CSS rules of their own. To ensure that your theme is compatible with Prism and its plugins, please follow these guidelines! + +#### Do not use CSS variables, at least not yet + +This may be a little strange, but it's because Prism supports IE11, which does not support CSS variables. However, we will be [dropping support for IE11 in Prism V2](https://github.com/PrismJS/prism/issues/1578), so you are encouraged to leave commented-out CSS variables (or at least a list of the colours you used) in your CSS files for an easier transition later on! + +#### Ensure that your token selectors include the `.token` class + +Prism adds the class `.token` to the, well, tokens, that it highlights with its wizardry magic. As such, all tokens that are highlighted by Prism will include the `.token` class. When you declare a style for a specific token, please make sure to include the `.token` class in your selector! + +```css +/* Do this */ +.token.token-name { + /* styles */ +} + +/* Do not do this */ +.token-name { + /* styles */ +} +``` + +#### Maintain a font size of `1em` for code blocks + +Some of Prism's plugins assume that the `pre` and `code` elements have the same font size, else there will be bugs pertaining to misaligned and so forth. As such, please set the `font-size` of `code[class*="language-"], pre[class*="language-"]` to `1em`, i.e.: + +```css +code[class*="language-"], +pre[class*="language-"] { + font-size: 1em; + /* more styles */ +} +``` + +#### Do not set the `overflow` property of `pre` elements + +The `overflow` property of `pre` elements must be left unset, or set to `auto`. This is because other `overflow` values will cause problems with layouts based on `float` or flexboxes. + +One notable exception is the original Coy theme because its shadows are impossible to implement otherwise. + +#### Increase selector specificity if/when overriding the default CSS rules of plugins + +If you want to take things a step further, you can also style the additional elements that [Prism's plugins](https://prismjs.com/index.html#plugins) create in the DOM! + +Since it is not possible for Prism to enforce the ordering of stylesheets in all cases, it is necessary to increase the [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) of your selectors for your theme's plugin overrides to ensure your overrides, well, override! Here's an example with the [Show Invisibles plugin](https://prismjs.com/plugins/show-invisibles): + +```css +/* Default Show Invisibles plugin styles */ +.token.tab:not(:empty):before, +.token.cr:before, +.token.lf:before, +.token.space:before { + color: #808080; + opacity: 0.6; +} + +/* Your Show Invisibles plugin overrides */ +.token.token.tab:not(:empty):before, +.token.token.cr:before, +.token.token.lf:before, +.token.token.space:before { + /* your styles */ +} +``` + +Our [theme template](prism-theme-template.css) covers most, if not all, of the plugins and overrides of interest, so you can just grab the selectors from there! + +#### Avoid re-declaring existing declarations if/when styling plugins + +To ensure forward compatibility, do not re-declare existing declaration if/when styling plugins. For example, the [Line Highlight plugin](https://prismjs.com/plugins/line-highlight) begins with the following CSS: + +```css +/* Default Line Highlight plugin styles */ +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; /* Same as .prism’s padding-top */ + + background: hsla(24, 20%, 50%,.08); + background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); + + pointer-events: none; + + line-height: inherit; + white-space: pre; +} +``` + +While you might want to change the background colour of highlighted lines to fit your theme better, there is no need to redeclare other properties such as `position`, `left`, `right`, and so on, since those values should not change. Plus, we may fix bugs in those plugins in the future that involve changing these default properties; re-declaring the existing defaults will bring those fixed bugs right back. + +### Resources + +Here are some resources that you may find helpful when designing and developing a new theme: + +- [Themes in the main repository](https://github.com/PrismJS/prism/tree/master/themes) and [themes in this repository](https://github.com/PrismJS/prism-themes/tree/master/themes) — examples you can refer to +- [prismjs.com: Examples](https://prismjs.com/examples.html) — use together with your browser's DevTools to see a sample of tokens in each language in action +- [prismjs.com: Test drive](https://prismjs.com/test.html) — enter your own code samples and see how they get grouped and highlighted (as well as what tokens they map to, with the help of your browser's DevTools) +- [prismjs.com: FAQ: How do I know which tokens I can style for every language?](https://prismjs.com/faq.html#how-do-i-know-which-tokens-i-can-style-for) — a reference of the tokens available per language +- [prismjs.com: Plugins](https://prismjs.com/index.html#plugins) — Prism's plugins, in the event you'd like to override their default styles! +- [css-tricks.com: Specifics on CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/) — a great guide to CSS specificity + +### Submitting your themes + +This section assumes some familiarity with git and npm (and of course, that you have git and Node.js installed). If you have any questions or need more guidance beyond Google, please reach out, we'll be happy to help! + +1. If you haven't already done so, please fork prism-themes and clone it to your machine. It would also be wise to create a new branch to work on. + +2. Copy your CSS file into the `themes` directory. Your theme's filename must be of the format `prism-.css`. + +3. Take a screenshot of your theme by running the following command in your project's directory: + ```bash + npm install --dev && npx gulp screenshot + ``` + +4. Add your theme and its screenshot to the README. + +5. Verify that all checks pass by running: + ```bash + npm test + ``` + +6. [Submit a Pull Request](https://github.com/PrismJS/prism-themes/compare), and we'll get back to you within a week! (Else, give us a ping!) + +We look forward to your new theme :) diff --git a/prism-theme-template.css b/prism-theme-template.css new file mode 100644 index 0000000..7e83fe8 --- /dev/null +++ b/prism-theme-template.css @@ -0,0 +1,440 @@ +/** + * Your theme's name + * If this is an adaptation of an existing theme, credit the creator and/or leave a link to it! + * Optional: Your name and/or username + */ + +/** + * Prism supports IE11, which does not support CSS variables + * However, you are encouraged to leave a list of colours you use here + * so that when we transition to Prism V2 (and drop support for IE11), + * the transition will be a little easier! + */ + +/* The styles used in this template are mostly taken from the One Dark theme */ + +/* Set the main properties of the code, code blocks, and inline code */ +code[class*="language-"], +pre[class*="language-"] { + background: hsl(220, 13%, 18%); + color: hsl(220, 14%, 71%); + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + /* The following properties are standard, please leave them as they are */ + font-size: 1em; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + /* You may change the following properties */ + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Optional: What the code looks like when highlighted */ +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection, +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; +} + +code[class*="language-"]::selection, +code[class*="language-"] ::selection, +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; +} + +/* Properties specific to code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; /* do not change this */ + border-radius: 0.3em; +} + +/* Properties specific to inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.2em 0.3em; + border-radius: 0.3em; + white-space: normal; +} + +/* Print */ +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* These are the minimum tokens you must style, though do feel free to rearrange them as you need */ +.token.comment, +.token.prolog, +.token.cdata { + color: hsl(220, 10%, 40%); +} + +.token.doctype, +.token.punctuation, +.token.entity { + color: hsl(220, 14%, 71%); +} + +.token.attr-name, +.token.class-name, +.token.boolean, +.token.constant, +.token.number, +.token.atrule { + color: hsl(29, 54%, 61%); +} + +.token.keyword { + color: hsl(286, 60%, 67%); +} + +.token.property, +.token.tag, +.token.symbol, +.token.deleted, +.token.important { + color: hsl(355, 65%, 65%); +} + +.token.selector, +.token.string, +.token.char, +.token.builtin, +.token.inserted, +.token.regex, +.token.attr-value { + color: hsl(95, 38%, 62%); +} + +.token.variable, +.token.operator, +.token.function { + color: hsl(207, 82%, 66%); +} + +.token.url { + color: hsl(187, 47%, 55%); +} + +/* The following rules are pretty standard across themes, but feel free to adjust them */ +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.namespace { + opacity: 0.7; +} + +/* Everything below this line is optional; it depends on how detailed you want your theme to be */ + +/* LANGUAGE-SPECIFIC OVERRIDES */ +/* If you'd like your theme to have overrides for specific languages, here's an example */ +.language-css .token.important { + color: hsl(286, 60%, 67%); +} + +/* PLUGIN OVERRIDES */ +/* If you'd like to override default plugin styles, you can use these selectors */ + +/** + * The duplicate classes are intentional - this is to ensure that your declared + * styles will take precedence over the plugins' defaults, as we cannot control + * whether the user will insert your stylesheet first or last + */ + +/** + * The most popular plugins are: Line Highlight, Line Numbers, and Toolbar + */ + +/** + * Show Invisibles plugin overrides + * https://prismjs.com/plugins/show-invisibles + */ + +/* Styling the look of the tokens */ +.token.token.tab:not(:empty):before, +.token.token.cr:before, +.token.token.lf:before, +.token.token.space:before { + color: hsla(220, 14%, 71%, 0.15); + text-shadow: none; +} + +/** + * Autolink plugin overrides + * https://prismjs.com/plugins/autolinker + */ + +/* Link in the code */ +.token.token a { + color: inherit; /* this is the default */ +} + +/** + * Toolbar plugin overrides + * https://prismjs.com/plugins/toolbar + * This is the third-most popular plugin + * Used in conjunction with Show Language, Copy to Clipboard Button, and/or Download Button + */ + +/* The 'containers' holding the buttons (or pills) themselves */ +div.code-toolbar > .toolbar.toolbar > .toolbar-item { + margin-right: 0.4em; /* default: not set; there is no spacing */ +} + +/* Styling the buttons (or pills) */ +/* Feel free to style them separately if that's what you prefer */ +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { + background: hsl(220, 13%, 26%); + color: hsl(220, 9%, 55%); + padding: 0.1em 0.4em; + border-radius: 0.3em; +} + +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { + background: hsl(220, 13%, 28%); + color: hsl(220, 14%, 71%); +} + +/** + * Line Highlight plugin overrides + * https://prismjs.com/plugins/line-highlight + * This is the most popular plugin + */ + +/* The highlighted line itself */ +.line-highlight.line-highlight { + background: hsla(220, 100%, 80%, 0.04); +} + +/* Default line numbers in Line Highlight plugin */ +.line-highlight.line-highlight:before, +.line-highlight.line-highlight[data-end]:after { + background: hsl(220, 13%, 26%); + color: hsl(220, 14%, 71%); + padding: 0.1em 0.6em; + border-radius: 0.3em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ +} + +/* Hovering over a linkable line number (in the gutter area) */ +/* Requires Line Numbers plugin as well */ +pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: hsla(220, 100%, 80%, 0.04); +} + +/** + * Line Numbers plugin overrides + * https://prismjs.com/plugins/line-numbers + * This is the second-most popular plugin + */ + +/* Line separating gutter from coding area */ +.line-numbers.line-numbers .line-numbers-rows { + border-right-color: hsla(220, 14%, 71%, 0.15); +} + +/* Line numbers */ +.line-numbers .line-numbers-rows > span:before { + color: hsl(220, 14%, 45%); +} + +/** + * Command Line plugin overrides + * https://prismjs.com/plugins/command-line + */ + +/* Line separating gutter from coding area */ +.command-line .command-line-prompt { + border-right-color: hsla(220, 14%, 71%, 0.15); +} + +/* User details or whatever in the gutter */ +.command-line .command-line-prompt > span:before { + color: hsl(220, 14%, 45%); +} + +/** + * Match Braces plugin overrides + * https://prismjs.com/plugins/match-braces + */ + +/* Style of braces on hover */ +.token.token.punctuation.brace-hover, +.token.token.punctuation.brace-selected { + outline-color: hsl(220, 100%, 66%); /* default: not set; inherits from .token.punctuation */ +} + +/* Braces when rainbow braces is enabled */ +/* Feel free to re-organise the levels */ +.rainbow-braces .token.token.punctuation.brace-level-1, +.rainbow-braces .token.token.punctuation.brace-level-5, +.rainbow-braces .token.token.punctuation.brace-level-9 { + color: hsl(355, 65%, 65%); + outline-color: inherit; +} + +.rainbow-braces .token.token.punctuation.brace-level-2, +.rainbow-braces .token.token.punctuation.brace-level-6, +.rainbow-braces .token.token.punctuation.brace-level-10 { + color: hsl(95, 38%, 62%); + outline-color: inherit; +} + +.rainbow-braces .token.token.punctuation.brace-level-3, +.rainbow-braces .token.token.punctuation.brace-level-7, +.rainbow-braces .token.token.punctuation.brace-level-11 { + color: hsl(207, 82%, 66%); + outline-color: inherit; +} + +.rainbow-braces .token.token.punctuation.brace-level-4, +.rainbow-braces .token.token.punctuation.brace-level-8, +.rainbow-braces .token.token.punctuation.brace-level-12 { + color: hsl(286, 60%, 67%); + outline-color: inherit; +} + +/** + * Diff Highlight plugin overrides + * https://prismjs.com/plugins/diff-highlight + */ + +/* Deleted lines */ +pre.diff-highlight > code .token.token.deleted:not(.prefix), +pre > code.diff-highlight .token.token.deleted:not(.prefix) { + background-color: hsla(353, 100%, 66%, 0.15); +} + +/* Deleted lines on highlight */ +pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { + background-color: hsla(353, 95%, 66%, 0.25); +} + +pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { + background-color: hsla(353, 95%, 66%, 0.25); +} + +/* Inserted lines */ +pre.diff-highlight > code .token.token.inserted:not(.prefix), +pre > code.diff-highlight .token.token.inserted:not(.prefix) { + background-color: hsla(137, 100%, 55%, 0.15); +} + +/* Inserted lines on highlight */ +pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { + background-color: hsla(135, 73%, 55%, 0.25); +} + +pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { + background-color: hsla(135, 73%, 55%, 0.25); +} + +/** + * Previewers plugin overrides + * https://prismjs.com/plugins/previewers + */ + +/* The main bulk of the popup */ +.prism-previewer.prism-previewer:before, +.prism-previewer-gradient.prism-previewer-gradient div { + border-color: hsl(224, 13%, 17%); +} + +/* Specifically for border radius of the popup if you want to modify it */ +/* Angle and time should remain as circles and are hence not included */ +.prism-previewer-color.prism-previewer-color:before, +.prism-previewer-gradient.prism-previewer-gradient div, +.prism-previewer-easing.prism-previewer-easing:before { + border-radius: 0.3em; +} + +/* Triangle part of the popup pointing to the code */ +.prism-previewer.prism-previewer:after { + border-top-color: hsl(224, 13%, 17%); +} + +.prism-previewer-flipped.prism-previewer-flipped.after { + border-bottom-color: hsl(224, 13%, 17%); +} + +/* Background colour within the popup */ +.prism-previewer-angle.prism-previewer-angle:before, +.prism-previewer-time.prism-previewer-time:before, +.prism-previewer-easing.prism-previewer-easing { + background: hsl(219, 13%, 22%); +} + +/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ +/* For time, this is the alternate colour */ +.prism-previewer-angle.prism-previewer-angle circle, +.prism-previewer-time.prism-previewer-time circle { + stroke: hsl(220, 14%, 71%); + stroke-opacity: 1; /* default: 0.9 */ +} + +/* Stroke colours of the handle (circle), direction point (line), and vector itself (path) */ +/* If you need help with the terminology: https://shapeshed.com/illustrator-101-the-pen-tool/ */ +/* Feel free to style these separately */ +.prism-previewer-easing.prism-previewer-easing circle, +.prism-previewer-easing.prism-previewer-easing line, +.prism-previewer-easing.prism-previewer-easing path { + stroke: hsl(220, 14%, 71%); +} + +/* Fill colour of the handle */ +.prism-previewer-easing.prism-previewer-easing circle { + fill: transparent; +} + +/** + * Treeview plugin overrides + * https://prismjs.com/plugins/treeview + */ + +/* TODO, maybe */ From 505671694287ef84aef6d427a0e24ba3716d768e Mon Sep 17 00:00:00 2001 From: Wei Ting <59229084+hoonweiting@users.noreply.github.com> Date: Sat, 18 Sep 2021 20:00:26 +0800 Subject: [PATCH 02/14] Make code style guidelines more concise Co-authored-by: Michael Schmidt --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d6a919d..28c8a44 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -94,7 +94,7 @@ Perhaps you want a particular token to be styled differently in a certain langua ### Code style guidelines -The most important one is that Prism uses [tabs for indentation and spaces for alignment](https://lea.verou.me/2012/01/why-tabs-are-clearly-superior/). For the rest, just run `npm run lint` to check (and `npm run lint-fix` to fix)! +We use [stylelint](https://stylelint.io/) to automatically check code style. Just run `npm run lint` to check (and `npm run lint-fix` to fix)! ### Theme guidelines and requirements From cfec6093d4dca3002a4bc4a9e477a285915e6cbc Mon Sep 17 00:00:00 2001 From: Wei Ting <59229084+hoonweiting@users.noreply.github.com> Date: Sat, 18 Sep 2021 20:01:43 +0800 Subject: [PATCH 03/14] Change default tab width to 4 Co-authored-by: Michael Schmidt --- prism-theme-template.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/prism-theme-template.css b/prism-theme-template.css index 7e83fe8..ba17487 100644 --- a/prism-theme-template.css +++ b/prism-theme-template.css @@ -29,9 +29,9 @@ pre[class*="language-"] { word-break: normal; line-height: 1.5; /* You may change the following properties */ - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; From 1c3f5502a1d2d487fc85080cf6d22ba3fa1d3a32 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sat, 18 Sep 2021 21:43:24 +0800 Subject: [PATCH 04/14] Move templates into template folder --- prism-theme-template.css | 440 ---------------------------- template/plugin-autolinker.css | 9 + template/plugin-command-line.css | 14 + template/plugin-diff-highlight.css | 46 +++ template/plugin-line-highlight.css | 26 ++ template/plugin-line-numbers.css | 15 + template/plugin-match-braces.css | 40 +++ template/plugin-previewers.css | 56 ++++ template/plugin-show-invisibles.css | 13 + template/plugin-toolbar.css | 32 ++ template/prism-theme-template.css | 158 ++++++++++ 11 files changed, 409 insertions(+), 440 deletions(-) delete mode 100644 prism-theme-template.css create mode 100644 template/plugin-autolinker.css create mode 100644 template/plugin-command-line.css create mode 100644 template/plugin-diff-highlight.css create mode 100644 template/plugin-line-highlight.css create mode 100644 template/plugin-line-numbers.css create mode 100644 template/plugin-match-braces.css create mode 100644 template/plugin-previewers.css create mode 100644 template/plugin-show-invisibles.css create mode 100644 template/plugin-toolbar.css create mode 100644 template/prism-theme-template.css diff --git a/prism-theme-template.css b/prism-theme-template.css deleted file mode 100644 index ba17487..0000000 --- a/prism-theme-template.css +++ /dev/null @@ -1,440 +0,0 @@ -/** - * Your theme's name - * If this is an adaptation of an existing theme, credit the creator and/or leave a link to it! - * Optional: Your name and/or username - */ - -/** - * Prism supports IE11, which does not support CSS variables - * However, you are encouraged to leave a list of colours you use here - * so that when we transition to Prism V2 (and drop support for IE11), - * the transition will be a little easier! - */ - -/* The styles used in this template are mostly taken from the One Dark theme */ - -/* Set the main properties of the code, code blocks, and inline code */ -code[class*="language-"], -pre[class*="language-"] { - background: hsl(220, 13%, 18%); - color: hsl(220, 14%, 71%); - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - /* The following properties are standard, please leave them as they are */ - font-size: 1em; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - /* You may change the following properties */ - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Optional: What the code looks like when highlighted */ -code[class*="language-"]::-moz-selection, -code[class*="language-"] ::-moz-selection, -pre[class*="language-"]::-moz-selection, -pre[class*="language-"] ::-moz-selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; -} - -code[class*="language-"]::selection, -code[class*="language-"] ::selection, -pre[class*="language-"]::selection, -pre[class*="language-"] ::selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; -} - -/* Properties specific to code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; /* do not change this */ - border-radius: 0.3em; -} - -/* Properties specific to inline code */ -:not(pre) > code[class*="language-"] { - padding: 0.2em 0.3em; - border-radius: 0.3em; - white-space: normal; -} - -/* Print */ -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* These are the minimum tokens you must style, though do feel free to rearrange them as you need */ -.token.comment, -.token.prolog, -.token.cdata { - color: hsl(220, 10%, 40%); -} - -.token.doctype, -.token.punctuation, -.token.entity { - color: hsl(220, 14%, 71%); -} - -.token.attr-name, -.token.class-name, -.token.boolean, -.token.constant, -.token.number, -.token.atrule { - color: hsl(29, 54%, 61%); -} - -.token.keyword { - color: hsl(286, 60%, 67%); -} - -.token.property, -.token.tag, -.token.symbol, -.token.deleted, -.token.important { - color: hsl(355, 65%, 65%); -} - -.token.selector, -.token.string, -.token.char, -.token.builtin, -.token.inserted, -.token.regex, -.token.attr-value { - color: hsl(95, 38%, 62%); -} - -.token.variable, -.token.operator, -.token.function { - color: hsl(207, 82%, 66%); -} - -.token.url { - color: hsl(187, 47%, 55%); -} - -/* The following rules are pretty standard across themes, but feel free to adjust them */ -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.token.namespace { - opacity: 0.7; -} - -/* Everything below this line is optional; it depends on how detailed you want your theme to be */ - -/* LANGUAGE-SPECIFIC OVERRIDES */ -/* If you'd like your theme to have overrides for specific languages, here's an example */ -.language-css .token.important { - color: hsl(286, 60%, 67%); -} - -/* PLUGIN OVERRIDES */ -/* If you'd like to override default plugin styles, you can use these selectors */ - -/** - * The duplicate classes are intentional - this is to ensure that your declared - * styles will take precedence over the plugins' defaults, as we cannot control - * whether the user will insert your stylesheet first or last - */ - -/** - * The most popular plugins are: Line Highlight, Line Numbers, and Toolbar - */ - -/** - * Show Invisibles plugin overrides - * https://prismjs.com/plugins/show-invisibles - */ - -/* Styling the look of the tokens */ -.token.token.tab:not(:empty):before, -.token.token.cr:before, -.token.token.lf:before, -.token.token.space:before { - color: hsla(220, 14%, 71%, 0.15); - text-shadow: none; -} - -/** - * Autolink plugin overrides - * https://prismjs.com/plugins/autolinker - */ - -/* Link in the code */ -.token.token a { - color: inherit; /* this is the default */ -} - -/** - * Toolbar plugin overrides - * https://prismjs.com/plugins/toolbar - * This is the third-most popular plugin - * Used in conjunction with Show Language, Copy to Clipboard Button, and/or Download Button - */ - -/* The 'containers' holding the buttons (or pills) themselves */ -div.code-toolbar > .toolbar.toolbar > .toolbar-item { - margin-right: 0.4em; /* default: not set; there is no spacing */ -} - -/* Styling the buttons (or pills) */ -/* Feel free to style them separately if that's what you prefer */ -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { - background: hsl(220, 13%, 26%); - color: hsl(220, 9%, 55%); - padding: 0.1em 0.4em; - border-radius: 0.3em; -} - -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { - background: hsl(220, 13%, 28%); - color: hsl(220, 14%, 71%); -} - -/** - * Line Highlight plugin overrides - * https://prismjs.com/plugins/line-highlight - * This is the most popular plugin - */ - -/* The highlighted line itself */ -.line-highlight.line-highlight { - background: hsla(220, 100%, 80%, 0.04); -} - -/* Default line numbers in Line Highlight plugin */ -.line-highlight.line-highlight:before, -.line-highlight.line-highlight[data-end]:after { - background: hsl(220, 13%, 26%); - color: hsl(220, 14%, 71%); - padding: 0.1em 0.6em; - border-radius: 0.3em; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ -} - -/* Hovering over a linkable line number (in the gutter area) */ -/* Requires Line Numbers plugin as well */ -pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: hsla(220, 100%, 80%, 0.04); -} - -/** - * Line Numbers plugin overrides - * https://prismjs.com/plugins/line-numbers - * This is the second-most popular plugin - */ - -/* Line separating gutter from coding area */ -.line-numbers.line-numbers .line-numbers-rows { - border-right-color: hsla(220, 14%, 71%, 0.15); -} - -/* Line numbers */ -.line-numbers .line-numbers-rows > span:before { - color: hsl(220, 14%, 45%); -} - -/** - * Command Line plugin overrides - * https://prismjs.com/plugins/command-line - */ - -/* Line separating gutter from coding area */ -.command-line .command-line-prompt { - border-right-color: hsla(220, 14%, 71%, 0.15); -} - -/* User details or whatever in the gutter */ -.command-line .command-line-prompt > span:before { - color: hsl(220, 14%, 45%); -} - -/** - * Match Braces plugin overrides - * https://prismjs.com/plugins/match-braces - */ - -/* Style of braces on hover */ -.token.token.punctuation.brace-hover, -.token.token.punctuation.brace-selected { - outline-color: hsl(220, 100%, 66%); /* default: not set; inherits from .token.punctuation */ -} - -/* Braces when rainbow braces is enabled */ -/* Feel free to re-organise the levels */ -.rainbow-braces .token.token.punctuation.brace-level-1, -.rainbow-braces .token.token.punctuation.brace-level-5, -.rainbow-braces .token.token.punctuation.brace-level-9 { - color: hsl(355, 65%, 65%); - outline-color: inherit; -} - -.rainbow-braces .token.token.punctuation.brace-level-2, -.rainbow-braces .token.token.punctuation.brace-level-6, -.rainbow-braces .token.token.punctuation.brace-level-10 { - color: hsl(95, 38%, 62%); - outline-color: inherit; -} - -.rainbow-braces .token.token.punctuation.brace-level-3, -.rainbow-braces .token.token.punctuation.brace-level-7, -.rainbow-braces .token.token.punctuation.brace-level-11 { - color: hsl(207, 82%, 66%); - outline-color: inherit; -} - -.rainbow-braces .token.token.punctuation.brace-level-4, -.rainbow-braces .token.token.punctuation.brace-level-8, -.rainbow-braces .token.token.punctuation.brace-level-12 { - color: hsl(286, 60%, 67%); - outline-color: inherit; -} - -/** - * Diff Highlight plugin overrides - * https://prismjs.com/plugins/diff-highlight - */ - -/* Deleted lines */ -pre.diff-highlight > code .token.token.deleted:not(.prefix), -pre > code.diff-highlight .token.token.deleted:not(.prefix) { - background-color: hsla(353, 100%, 66%, 0.15); -} - -/* Deleted lines on highlight */ -pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, -pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -/* Inserted lines */ -pre.diff-highlight > code .token.token.inserted:not(.prefix), -pre > code.diff-highlight .token.token.inserted:not(.prefix) { - background-color: hsla(137, 100%, 55%, 0.15); -} - -/* Inserted lines on highlight */ -pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, -pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -/** - * Previewers plugin overrides - * https://prismjs.com/plugins/previewers - */ - -/* The main bulk of the popup */ -.prism-previewer.prism-previewer:before, -.prism-previewer-gradient.prism-previewer-gradient div { - border-color: hsl(224, 13%, 17%); -} - -/* Specifically for border radius of the popup if you want to modify it */ -/* Angle and time should remain as circles and are hence not included */ -.prism-previewer-color.prism-previewer-color:before, -.prism-previewer-gradient.prism-previewer-gradient div, -.prism-previewer-easing.prism-previewer-easing:before { - border-radius: 0.3em; -} - -/* Triangle part of the popup pointing to the code */ -.prism-previewer.prism-previewer:after { - border-top-color: hsl(224, 13%, 17%); -} - -.prism-previewer-flipped.prism-previewer-flipped.after { - border-bottom-color: hsl(224, 13%, 17%); -} - -/* Background colour within the popup */ -.prism-previewer-angle.prism-previewer-angle:before, -.prism-previewer-time.prism-previewer-time:before, -.prism-previewer-easing.prism-previewer-easing { - background: hsl(219, 13%, 22%); -} - -/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ -/* For time, this is the alternate colour */ -.prism-previewer-angle.prism-previewer-angle circle, -.prism-previewer-time.prism-previewer-time circle { - stroke: hsl(220, 14%, 71%); - stroke-opacity: 1; /* default: 0.9 */ -} - -/* Stroke colours of the handle (circle), direction point (line), and vector itself (path) */ -/* If you need help with the terminology: https://shapeshed.com/illustrator-101-the-pen-tool/ */ -/* Feel free to style these separately */ -.prism-previewer-easing.prism-previewer-easing circle, -.prism-previewer-easing.prism-previewer-easing line, -.prism-previewer-easing.prism-previewer-easing path { - stroke: hsl(220, 14%, 71%); -} - -/* Fill colour of the handle */ -.prism-previewer-easing.prism-previewer-easing circle { - fill: transparent; -} - -/** - * Treeview plugin overrides - * https://prismjs.com/plugins/treeview - */ - -/* TODO, maybe */ diff --git a/template/plugin-autolinker.css b/template/plugin-autolinker.css new file mode 100644 index 0000000..6e7bf50 --- /dev/null +++ b/template/plugin-autolinker.css @@ -0,0 +1,9 @@ +/** + * Autolinker plugin overrides + * https://prismjs.com/plugins/autolinker + */ + +/* Link in the code */ +.token.token a { + color: inherit; /* this is the default */ +} diff --git a/template/plugin-command-line.css b/template/plugin-command-line.css new file mode 100644 index 0000000..42ec0b5 --- /dev/null +++ b/template/plugin-command-line.css @@ -0,0 +1,14 @@ +/** + * Command Line plugin overrides + * https://prismjs.com/plugins/command-line + */ + +/* Line separating gutter from coding area */ +.command-line .command-line-prompt { + border-right-color: hsla(220, 14%, 71%, 0.15); +} + +/* User details or whatever in the gutter */ +.command-line .command-line-prompt > span:before { + color: hsl(220, 14%, 45%); +} diff --git a/template/plugin-diff-highlight.css b/template/plugin-diff-highlight.css new file mode 100644 index 0000000..717fa8b --- /dev/null +++ b/template/plugin-diff-highlight.css @@ -0,0 +1,46 @@ +/** + * Diff Highlight plugin overrides + * https://prismjs.com/plugins/diff-highlight + */ + +/* Deleted lines */ +pre.diff-highlight > code .token.token.deleted:not(.prefix), +pre > code.diff-highlight .token.token.deleted:not(.prefix) { + background-color: hsla(353, 100%, 66%, 0.15); +} + +/* Deleted lines on highlight */ +pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { + background-color: hsla(353, 95%, 66%, 0.25); +} + +pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { + background-color: hsla(353, 95%, 66%, 0.25); +} + +/* Inserted lines */ +pre.diff-highlight > code .token.token.inserted:not(.prefix), +pre > code.diff-highlight .token.token.inserted:not(.prefix) { + background-color: hsla(137, 100%, 55%, 0.15); +} + +/* Inserted lines on highlight */ +pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { + background-color: hsla(135, 73%, 55%, 0.25); +} + +pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, +pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, +pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { + background-color: hsla(135, 73%, 55%, 0.25); +} diff --git a/template/plugin-line-highlight.css b/template/plugin-line-highlight.css new file mode 100644 index 0000000..f39a7ed --- /dev/null +++ b/template/plugin-line-highlight.css @@ -0,0 +1,26 @@ +/** + * Line Highlight plugin overrides + * https://prismjs.com/plugins/line-highlight + * This is the most popular plugin + */ + +/* The highlighted line itself */ +.line-highlight.line-highlight { + background: hsla(220, 100%, 80%, 0.04); +} + +/* Default line numbers in Line Highlight plugin */ +.line-highlight.line-highlight:before, +.line-highlight.line-highlight[data-end]:after { + background: hsl(220, 13%, 26%); + color: hsl(220, 14%, 71%); + padding: 0.1em 0.6em; + border-radius: 0.3em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ +} + +/* Hovering over a linkable line number (in the gutter area) */ +/* Requires Line Numbers plugin as well */ +pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { + background-color: hsla(220, 100%, 80%, 0.04); +} diff --git a/template/plugin-line-numbers.css b/template/plugin-line-numbers.css new file mode 100644 index 0000000..bc1b1fc --- /dev/null +++ b/template/plugin-line-numbers.css @@ -0,0 +1,15 @@ +/** + * Line Numbers plugin overrides + * https://prismjs.com/plugins/line-numbers + * This is the second-most popular plugin + */ + +/* Line separating gutter from coding area */ +.line-numbers.line-numbers .line-numbers-rows { + border-right-color: hsla(220, 14%, 71%, 0.15); +} + +/* Line numbers */ +.line-numbers .line-numbers-rows > span:before { + color: hsl(220, 14%, 45%); +} diff --git a/template/plugin-match-braces.css b/template/plugin-match-braces.css new file mode 100644 index 0000000..6fff358 --- /dev/null +++ b/template/plugin-match-braces.css @@ -0,0 +1,40 @@ +/** + * Match Braces plugin overrides + * https://prismjs.com/plugins/match-braces + */ + +/* Style of braces on hover */ +.token.token.punctuation.brace-hover, +.token.token.punctuation.brace-selected { + outline-color: hsl(220, 100%, 66%); /* default: not set; inherits from .token.punctuation */ +} + +/* Braces when rainbow braces is enabled */ +/* Feel free to re-organise the levels */ +.rainbow-braces .token.token.punctuation.brace-level-1, +.rainbow-braces .token.token.punctuation.brace-level-5, +.rainbow-braces .token.token.punctuation.brace-level-9 { + color: hsl(355, 65%, 65%); + outline-color: inherit; +} + +.rainbow-braces .token.token.punctuation.brace-level-2, +.rainbow-braces .token.token.punctuation.brace-level-6, +.rainbow-braces .token.token.punctuation.brace-level-10 { + color: hsl(95, 38%, 62%); + outline-color: inherit; +} + +.rainbow-braces .token.token.punctuation.brace-level-3, +.rainbow-braces .token.token.punctuation.brace-level-7, +.rainbow-braces .token.token.punctuation.brace-level-11 { + color: hsl(207, 82%, 66%); + outline-color: inherit; +} + +.rainbow-braces .token.token.punctuation.brace-level-4, +.rainbow-braces .token.token.punctuation.brace-level-8, +.rainbow-braces .token.token.punctuation.brace-level-12 { + color: hsl(286, 60%, 67%); + outline-color: inherit; +} diff --git a/template/plugin-previewers.css b/template/plugin-previewers.css new file mode 100644 index 0000000..7bb19da --- /dev/null +++ b/template/plugin-previewers.css @@ -0,0 +1,56 @@ +/** + * Previewers plugin overrides + * https://prismjs.com/plugins/previewers + */ + +/* The main bulk of the popup */ +.prism-previewer.prism-previewer:before, +.prism-previewer-gradient.prism-previewer-gradient div { + border-color: hsl(224, 13%, 17%); +} + +/* Specifically for border radius of the popup if you want to modify it */ +/* Angle and time should remain as circles and are hence not included */ +.prism-previewer-color.prism-previewer-color:before, +.prism-previewer-gradient.prism-previewer-gradient div, +.prism-previewer-easing.prism-previewer-easing:before { + border-radius: 0.3em; +} + +/* Triangle part of the popup pointing to the code */ +.prism-previewer.prism-previewer:after { + border-top-color: hsl(224, 13%, 17%); +} + +.prism-previewer-flipped.prism-previewer-flipped.after { + border-bottom-color: hsl(224, 13%, 17%); +} + +/* Background colour within the popup */ +.prism-previewer-angle.prism-previewer-angle:before, +.prism-previewer-time.prism-previewer-time:before, +.prism-previewer-easing.prism-previewer-easing { + background: hsl(219, 13%, 22%); +} + +/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ +/* For time, this is the alternate colour */ +.prism-previewer-angle.prism-previewer-angle circle, +.prism-previewer-time.prism-previewer-time circle { + stroke: hsl(220, 14%, 71%); + stroke-opacity: 1; /* default: 0.9 */ +} + +/* Stroke colours of the handle (circle), direction point (line), and vector itself (path) */ +/* If you need help with the terminology: https://shapeshed.com/illustrator-101-the-pen-tool/ */ +/* Feel free to style these separately */ +.prism-previewer-easing.prism-previewer-easing circle, +.prism-previewer-easing.prism-previewer-easing line, +.prism-previewer-easing.prism-previewer-easing path { + stroke: hsl(220, 14%, 71%); +} + +/* Fill colour of the handle */ +.prism-previewer-easing.prism-previewer-easing circle { + fill: transparent; +} diff --git a/template/plugin-show-invisibles.css b/template/plugin-show-invisibles.css new file mode 100644 index 0000000..47a6a1f --- /dev/null +++ b/template/plugin-show-invisibles.css @@ -0,0 +1,13 @@ +/** + * Show Invisibles plugin overrides + * https://prismjs.com/plugins/show-invisibles + */ + +/* Styling the look of the tokens */ +.token.token.tab:not(:empty):before, +.token.token.cr:before, +.token.token.lf:before, +.token.token.space:before { + color: hsla(220, 14%, 71%, 0.15); + text-shadow: none; +} diff --git a/template/plugin-toolbar.css b/template/plugin-toolbar.css new file mode 100644 index 0000000..5f5cfbc --- /dev/null +++ b/template/plugin-toolbar.css @@ -0,0 +1,32 @@ +/** + * Toolbar plugin overrides + * https://prismjs.com/plugins/toolbar + * This is the third-most popular plugin + * Used in conjunction with Show Language, Copy to Clipboard Button, and/or Download Button + */ + +/* The 'containers' holding the buttons (or pills) themselves */ +div.code-toolbar > .toolbar.toolbar > .toolbar-item { + margin-right: 0.4em; /* default: not set; there is no spacing */ +} + +/* Styling the buttons (or pills) */ +/* Feel free to style them separately if that's what you prefer */ +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { + background: hsl(220, 13%, 26%); + color: hsl(220, 9%, 55%); + padding: 0.1em 0.4em; + border-radius: 0.3em; +} + +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, +div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { + background: hsl(220, 13%, 28%); + color: hsl(220, 14%, 71%); +} diff --git a/template/prism-theme-template.css b/template/prism-theme-template.css new file mode 100644 index 0000000..2f3ec47 --- /dev/null +++ b/template/prism-theme-template.css @@ -0,0 +1,158 @@ +/** + * Your theme's name + * If this is an adaptation of an existing theme, credit the creator and/or leave a link to it! + * Optional: Your name and/or username + */ + +/** + * Prism supports IE11, which does not support CSS variables + * However, you are encouraged to leave a list of colours you use here + * so that when we transition to Prism V2 (and drop support for IE11), + * the transition will be a little easier! + */ + +/* The styles used in this template are mostly taken from the One Dark theme */ + +/* Set the main properties of the code, code blocks, and inline code */ +code[class*="language-"], +pre[class*="language-"] { + background: hsl(220, 13%, 18%); + color: hsl(220, 14%, 71%); + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + /* The following properties are standard, please leave them as they are */ + font-size: 1em; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + /* You may change the following properties */ + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Optional: What the code looks like when highlighted */ +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection, +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; +} + +code[class*="language-"]::selection, +code[class*="language-"] ::selection, +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection { + background: hsl(220, 13%, 28%); + color: inherit; + text-shadow: none; +} + +/* Properties specific to code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; /* do not change this */ + border-radius: 0.3em; +} + +/* Properties specific to inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.2em 0.3em; + border-radius: 0.3em; + white-space: normal; +} + +/* Print */ +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* These are the minimum tokens you must style, though do feel free to rearrange them as you need */ +.token.comment, +.token.prolog, +.token.cdata { + color: hsl(220, 10%, 40%); +} + +.token.doctype, +.token.punctuation, +.token.entity { + color: hsl(220, 14%, 71%); +} + +.token.attr-name, +.token.class-name, +.token.boolean, +.token.constant, +.token.number, +.token.atrule { + color: hsl(29, 54%, 61%); +} + +.token.keyword { + color: hsl(286, 60%, 67%); +} + +.token.property, +.token.tag, +.token.symbol, +.token.deleted, +.token.important { + color: hsl(355, 65%, 65%); +} + +.token.selector, +.token.string, +.token.char, +.token.builtin, +.token.inserted, +.token.regex, +.token.attr-value { + color: hsl(95, 38%, 62%); +} + +.token.variable, +.token.operator, +.token.function { + color: hsl(207, 82%, 66%); +} + +.token.url { + color: hsl(187, 47%, 55%); +} + +/* The following rules are pretty standard across themes, but feel free to adjust them */ +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +.token.namespace { + opacity: 0.7; +} + +/* LANGUAGE-SPECIFIC OVERRIDES */ +/* If you'd like your theme to have overrides for specific languages, here's an example */ +.language-css .token.important { + color: hsl(286, 60%, 67%); +} From a22c0251b69d6434c531ebb0daa00f157104e4a1 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sat, 18 Sep 2021 22:16:28 +0800 Subject: [PATCH 05/14] Unset most properties --- .stylelintrc.json | 3 + template/plugin-autolinker.css | 2 +- template/plugin-command-line.css | 4 +- template/plugin-diff-highlight.css | 12 +- template/plugin-line-highlight.css | 14 +-- template/plugin-line-numbers.css | 4 +- template/plugin-match-braces.css | 18 +-- template/plugin-previewers.css | 18 +-- template/plugin-show-invisibles.css | 3 +- template/plugin-toolbar.css | 14 +-- template/prism-theme-template.css | 167 ++++++++++++++++++---------- 11 files changed, 156 insertions(+), 103 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 5dbb1cc..adb96db 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -5,6 +5,9 @@ "color-hex-length": null, "comment-empty-line-before": null, "declaration-empty-line-before": null, + "declaration-property-value-blacklist": { + "//": ["/\\bunset\\b/"] + }, "indentation": "tab", "no-descending-specificity": null, "number-leading-zero": null, diff --git a/template/plugin-autolinker.css b/template/plugin-autolinker.css index 6e7bf50..af51162 100644 --- a/template/plugin-autolinker.css +++ b/template/plugin-autolinker.css @@ -5,5 +5,5 @@ /* Link in the code */ .token.token a { - color: inherit; /* this is the default */ + color: unset; /* default: inherit */ } diff --git a/template/plugin-command-line.css b/template/plugin-command-line.css index 42ec0b5..dc14958 100644 --- a/template/plugin-command-line.css +++ b/template/plugin-command-line.css @@ -5,10 +5,10 @@ /* Line separating gutter from coding area */ .command-line .command-line-prompt { - border-right-color: hsla(220, 14%, 71%, 0.15); + border-right-color: unset; } /* User details or whatever in the gutter */ .command-line .command-line-prompt > span:before { - color: hsl(220, 14%, 45%); + color: unset; } diff --git a/template/plugin-diff-highlight.css b/template/plugin-diff-highlight.css index 717fa8b..68053bb 100644 --- a/template/plugin-diff-highlight.css +++ b/template/plugin-diff-highlight.css @@ -6,7 +6,7 @@ /* Deleted lines */ pre.diff-highlight > code .token.token.deleted:not(.prefix), pre > code.diff-highlight .token.token.deleted:not(.prefix) { - background-color: hsla(353, 100%, 66%, 0.15); + background-color: unset; } /* Deleted lines on highlight */ @@ -14,20 +14,20 @@ pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { - background-color: hsla(353, 95%, 66%, 0.25); + background-color: unset; } pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { - background-color: hsla(353, 95%, 66%, 0.25); + background-color: unset; } /* Inserted lines */ pre.diff-highlight > code .token.token.inserted:not(.prefix), pre > code.diff-highlight .token.token.inserted:not(.prefix) { - background-color: hsla(137, 100%, 55%, 0.15); + background-color: unset; } /* Inserted lines on highlight */ @@ -35,12 +35,12 @@ pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { - background-color: hsla(135, 73%, 55%, 0.25); + background-color: unset; } pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { - background-color: hsla(135, 73%, 55%, 0.25); + background-color: unset; } diff --git a/template/plugin-line-highlight.css b/template/plugin-line-highlight.css index f39a7ed..16ef755 100644 --- a/template/plugin-line-highlight.css +++ b/template/plugin-line-highlight.css @@ -6,21 +6,21 @@ /* The highlighted line itself */ .line-highlight.line-highlight { - background: hsla(220, 100%, 80%, 0.04); + background: unset; } /* Default line numbers in Line Highlight plugin */ .line-highlight.line-highlight:before, .line-highlight.line-highlight[data-end]:after { - background: hsl(220, 13%, 26%); - color: hsl(220, 14%, 71%); - padding: 0.1em 0.6em; - border-radius: 0.3em; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ + background: unset; + color: unset; + padding: unset; + border-radius: unset; + box-shadow: unset; } /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: hsla(220, 100%, 80%, 0.04); + background-color: unset; } diff --git a/template/plugin-line-numbers.css b/template/plugin-line-numbers.css index bc1b1fc..c179d25 100644 --- a/template/plugin-line-numbers.css +++ b/template/plugin-line-numbers.css @@ -6,10 +6,10 @@ /* Line separating gutter from coding area */ .line-numbers.line-numbers .line-numbers-rows { - border-right-color: hsla(220, 14%, 71%, 0.15); + border-right-color: unset; } /* Line numbers */ .line-numbers .line-numbers-rows > span:before { - color: hsl(220, 14%, 45%); + color: unset; } diff --git a/template/plugin-match-braces.css b/template/plugin-match-braces.css index 6fff358..8bb915f 100644 --- a/template/plugin-match-braces.css +++ b/template/plugin-match-braces.css @@ -6,7 +6,7 @@ /* Style of braces on hover */ .token.token.punctuation.brace-hover, .token.token.punctuation.brace-selected { - outline-color: hsl(220, 100%, 66%); /* default: not set; inherits from .token.punctuation */ + outline-color: unset; /* default: not set; inherits from .token.punctuation */ } /* Braces when rainbow braces is enabled */ @@ -14,27 +14,27 @@ .rainbow-braces .token.token.punctuation.brace-level-1, .rainbow-braces .token.token.punctuation.brace-level-5, .rainbow-braces .token.token.punctuation.brace-level-9 { - color: hsl(355, 65%, 65%); - outline-color: inherit; + color: unset; + outline-color: unset; } .rainbow-braces .token.token.punctuation.brace-level-2, .rainbow-braces .token.token.punctuation.brace-level-6, .rainbow-braces .token.token.punctuation.brace-level-10 { - color: hsl(95, 38%, 62%); - outline-color: inherit; + color: unset; + outline-color: unset; } .rainbow-braces .token.token.punctuation.brace-level-3, .rainbow-braces .token.token.punctuation.brace-level-7, .rainbow-braces .token.token.punctuation.brace-level-11 { - color: hsl(207, 82%, 66%); - outline-color: inherit; + color: unset; + outline-color: unset; } .rainbow-braces .token.token.punctuation.brace-level-4, .rainbow-braces .token.token.punctuation.brace-level-8, .rainbow-braces .token.token.punctuation.brace-level-12 { - color: hsl(286, 60%, 67%); - outline-color: inherit; + color: unset; + outline-color: unset; } diff --git a/template/plugin-previewers.css b/template/plugin-previewers.css index 7bb19da..6fc690a 100644 --- a/template/plugin-previewers.css +++ b/template/plugin-previewers.css @@ -6,7 +6,7 @@ /* The main bulk of the popup */ .prism-previewer.prism-previewer:before, .prism-previewer-gradient.prism-previewer-gradient div { - border-color: hsl(224, 13%, 17%); + border-color: unset; } /* Specifically for border radius of the popup if you want to modify it */ @@ -14,31 +14,31 @@ .prism-previewer-color.prism-previewer-color:before, .prism-previewer-gradient.prism-previewer-gradient div, .prism-previewer-easing.prism-previewer-easing:before { - border-radius: 0.3em; + border-radius: unset; } /* Triangle part of the popup pointing to the code */ .prism-previewer.prism-previewer:after { - border-top-color: hsl(224, 13%, 17%); + border-top-color: unset; } .prism-previewer-flipped.prism-previewer-flipped.after { - border-bottom-color: hsl(224, 13%, 17%); + border-bottom-color: unset; } /* Background colour within the popup */ .prism-previewer-angle.prism-previewer-angle:before, .prism-previewer-time.prism-previewer-time:before, .prism-previewer-easing.prism-previewer-easing { - background: hsl(219, 13%, 22%); + background: unset; } /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ /* For time, this is the alternate colour */ .prism-previewer-angle.prism-previewer-angle circle, .prism-previewer-time.prism-previewer-time circle { - stroke: hsl(220, 14%, 71%); - stroke-opacity: 1; /* default: 0.9 */ + stroke: unset; + stroke-opacity: unset; /* default: 0.9 */ } /* Stroke colours of the handle (circle), direction point (line), and vector itself (path) */ @@ -47,10 +47,10 @@ .prism-previewer-easing.prism-previewer-easing circle, .prism-previewer-easing.prism-previewer-easing line, .prism-previewer-easing.prism-previewer-easing path { - stroke: hsl(220, 14%, 71%); + stroke: unset; } /* Fill colour of the handle */ .prism-previewer-easing.prism-previewer-easing circle { - fill: transparent; + fill: unset; } diff --git a/template/plugin-show-invisibles.css b/template/plugin-show-invisibles.css index 47a6a1f..e237012 100644 --- a/template/plugin-show-invisibles.css +++ b/template/plugin-show-invisibles.css @@ -8,6 +8,5 @@ .token.token.cr:before, .token.token.lf:before, .token.token.space:before { - color: hsla(220, 14%, 71%, 0.15); - text-shadow: none; + color: unset; } diff --git a/template/plugin-toolbar.css b/template/plugin-toolbar.css index 5f5cfbc..afb9cef 100644 --- a/template/plugin-toolbar.css +++ b/template/plugin-toolbar.css @@ -7,7 +7,7 @@ /* The 'containers' holding the buttons (or pills) themselves */ div.code-toolbar > .toolbar.toolbar > .toolbar-item { - margin-right: 0.4em; /* default: not set; there is no spacing */ + margin-right: unset; /* default: not set; there is no spacing */ } /* Styling the buttons (or pills) */ @@ -15,10 +15,10 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item { div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { - background: hsl(220, 13%, 26%); - color: hsl(220, 9%, 55%); - padding: 0.1em 0.4em; - border-radius: 0.3em; + background: unset; + color: unset; + padding: unset; + border-radius: unset; } div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, @@ -27,6 +27,6 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { - background: hsl(220, 13%, 28%); - color: hsl(220, 14%, 71%); + background: unset; + color: unset; } diff --git a/template/prism-theme-template.css b/template/prism-theme-template.css index 2f3ec47..8d2c5c0 100644 --- a/template/prism-theme-template.css +++ b/template/prism-theme-template.css @@ -11,15 +11,12 @@ * the transition will be a little easier! */ -/* The styles used in this template are mostly taken from the One Dark theme */ - /* Set the main properties of the code, code blocks, and inline code */ code[class*="language-"], pre[class*="language-"] { - background: hsl(220, 13%, 18%); - color: hsl(220, 14%, 71%); - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + background: unset; + color: unset; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* this is the default */ /* The following properties are standard, please leave them as they are */ font-size: 1em; direction: ltr; @@ -28,10 +25,11 @@ pre[class*="language-"] { word-spacing: normal; word-break: normal; line-height: 1.5; - /* You may change the following properties */ + /* The default is 4, but you could change it if you really, really want to */ -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; + /* The following properties are also standard */ -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; @@ -43,98 +41,151 @@ code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection, pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; + background: unset; + color: unset; } code[class*="language-"]::selection, code[class*="language-"] ::selection, pre[class*="language-"]::selection, pre[class*="language-"] ::selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; + background: unset; + color: unset; } /* Properties specific to code blocks */ pre[class*="language-"] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; /* do not change this */ - border-radius: 0.3em; + padding: 1em; /* this is standard */ + margin: 0.5em 0; /* this is the default */ + overflow: auto; /* this is standard */ + border-radius: unset; } /* Properties specific to inline code */ :not(pre) > code[class*="language-"] { - padding: 0.2em 0.3em; - border-radius: 0.3em; - white-space: normal; + padding: 0.1em; /* this is the default */ + border-radius: unset; + white-space: normal; /* this is standard */ } -/* Print */ -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } +/* These are the minimum tokens you must style, though do feel free to rearrange them as you need */ +.token.comment { + color: unset; +} + +.token.prolog { + color: unset; } -/* These are the minimum tokens you must style, though do feel free to rearrange them as you need */ -.token.comment, -.token.prolog, .token.cdata { - color: hsl(220, 10%, 40%); + color: unset; +} + +.token.doctype { + color: unset; +} + +.token.punctuation { + color: unset; } -.token.doctype, -.token.punctuation, .token.entity { - color: hsl(220, 14%, 71%); + color: unset; +} + +.token.attr-name { + color: unset; +} + +.token.class-name { + color: unset; +} + +.token.boolean { + color: unset; +} + +.token.constant { + color: unset; +} + +.token.number { + color: unset; } -.token.attr-name, -.token.class-name, -.token.boolean, -.token.constant, -.token.number, .token.atrule { - color: hsl(29, 54%, 61%); + color: unset; } .token.keyword { - color: hsl(286, 60%, 67%); + color: unset; +} + +.token.property { + color: unset; +} + +.token.tag { + color: unset; +} + +.token.symbol { + color: unset; +} + +.token.deleted { + color: unset; } -.token.property, -.token.tag, -.token.symbol, -.token.deleted, .token.important { - color: hsl(355, 65%, 65%); + color: unset; +} + +.token.selector { + color: unset; +} + +.token.string { + color: unset; +} + +.token.char { + color: unset; +} + +.token.builtin { + color: unset; +} + +.token.inserted { + color: unset; +} + +.token.regex { + color: unset; } -.token.selector, -.token.string, -.token.char, -.token.builtin, -.token.inserted, -.token.regex, .token.attr-value { - color: hsl(95, 38%, 62%); + color: unset; +} + +.token.variable { + color: unset; +} + +.token.operator { + color: unset; } -.token.variable, -.token.operator, .token.function { - color: hsl(207, 82%, 66%); + color: unset; } .token.url { - color: hsl(187, 47%, 55%); + color: unset; } -/* The following rules are pretty standard across themes, but feel free to adjust them */ +/* The following rules are pretty similar across themes, but feel free to adjust them */ .token.bold { font-weight: bold; } @@ -154,5 +205,5 @@ pre[class*="language-"] { /* LANGUAGE-SPECIFIC OVERRIDES */ /* If you'd like your theme to have overrides for specific languages, here's an example */ .language-css .token.important { - color: hsl(286, 60%, 67%); + color: unset; } From 42ae757ea4f542eba40d2447f40d5bb4384dd43f Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sat, 18 Sep 2021 23:11:51 +0800 Subject: [PATCH 06/14] Update contributing doc --- CONTRIBUTING.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 28c8a44..d23530c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -36,7 +36,7 @@ Perhaps you have some thoughts on Prism Themes, whether it's the state of the co Whether it's documentation or code, Prism Themes welcomes Pull Requests! (If you're specifically looking to contribute a brand new theme, the next section on [Creating new themes](#creating-new-themes) would be more relevant.) -1. Fork this repository and create a new branch. It is possible that you do not have to clone it to your machine if you do not have to regenerate theme screenshots. If you need help at any point, please reach out! +1. Fork this repository and create a new branch. It is possible that you do not have to clone it to your machine if you do not have to regenerate theme screenshots. If you need help at any point, please reach out by [opening a new issue](https://github.com/PrismJS/prism-themes/issues/new/choose)! 2. Make the changes. @@ -51,7 +51,7 @@ Thank you for submitting a Pull Request! We really appreciate the time and effor ## Creating new themes -Prism themes are CSS files that set rules for inline code, code blocks, and the tokens within them. We have a [theme template](prism-theme-template.css) you may want to use as a starting point, as it provides additional tips and details beyond what is stated here. Additionally, when designing your theme, please make sure that the [theme guidelines and requirements](#theme-guidelines-and-requirements) are adhered to. +Prism themes are CSS files that set rules for inline code, code blocks, and the tokens within them. We have a [theme template](template/prism-theme-template.css) you may want to use as a starting point, as it provides additional tips and details beyond what is stated here. Additionally, when designing your theme, please make sure that the [theme guidelines and requirements](#theme-guidelines-and-requirements) are adhered to. ### How to style... @@ -69,7 +69,7 @@ While we have some [resources](#resources) for discovering tokens available in e ##### Is there a comprehensive list of tokens to style? -We're glad you asked! Prism has quite a few tokens, but until we can get the token docs sorted out, we do not have such a list. However, covering the most common tokens should be enough for most cases, and the names of these tokens are documented in the [theme template](prism-theme-template.css). +We're glad you asked! Prism has quite a few tokens, but until we can get the token docs sorted out, we do not have such a list. However, covering the most common tokens should be enough for most cases, and the names of these tokens are documented in the [theme template](template/prism-theme-template.css). #### Tokens for a specific language @@ -132,12 +132,6 @@ pre[class*="language-"] { } ``` -#### Do not set the `overflow` property of `pre` elements - -The `overflow` property of `pre` elements must be left unset, or set to `auto`. This is because other `overflow` values will cause problems with layouts based on `float` or flexboxes. - -One notable exception is the original Coy theme because its shadows are impossible to implement otherwise. - #### Increase selector specificity if/when overriding the default CSS rules of plugins If you want to take things a step further, you can also style the additional elements that [Prism's plugins](https://prismjs.com/index.html#plugins) create in the DOM! @@ -163,7 +157,13 @@ Since it is not possible for Prism to enforce the ordering of stylesheets in all } ``` -Our [theme template](prism-theme-template.css) covers most, if not all, of the plugins and overrides of interest, so you can just grab the selectors from there! +Our [plugin templates](template) covers most, if not all, of the plugins and overrides of interest, so you can just grab the selectors from there! + +If you'd like to prioritise plugins to style, these are the top three most popular plugins: + +1. [Line Highlight](https://prismjs.com/plugins/line-highlight) +2. [Line Numbers](https://prismjs.com/plugins/line-numbers) +3. [Toolbar](https://prismjs.com/plugins/toolbar) #### Avoid re-declaring existing declarations if/when styling plugins @@ -208,7 +208,7 @@ Here are some resources that you may find helpful when designing and developing ### Submitting your themes -This section assumes some familiarity with git and npm (and of course, that you have git and Node.js installed). If you have any questions or need more guidance beyond Google, please reach out, we'll be happy to help! +This section assumes some familiarity with git and npm (and of course, that you have git and Node.js installed). If you have any questions or need more guidance beyond Google, please reach out by [opening a new issue](https://github.com/PrismJS/prism-themes/issues/new/choose), we'll be happy to help! 1. If you haven't already done so, please fork prism-themes and clone it to your machine. It would also be wise to create a new branch to work on. From 395c0a7c523b738e698ca3131244b3b3d3e9ee52 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sat, 18 Sep 2021 23:13:58 +0800 Subject: [PATCH 07/14] Specify-ish Node.js version --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d23530c..f607714 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -208,7 +208,7 @@ Here are some resources that you may find helpful when designing and developing ### Submitting your themes -This section assumes some familiarity with git and npm (and of course, that you have git and Node.js installed). If you have any questions or need more guidance beyond Google, please reach out by [opening a new issue](https://github.com/PrismJS/prism-themes/issues/new/choose), we'll be happy to help! +This section assumes some familiarity with git and npm (and of course, that you have git and a recent-ish version of [Node.js](https://nodejs.org/) installed). If you have any questions or need more guidance beyond Google, please reach out by [opening a new issue](https://github.com/PrismJS/prism-themes/issues/new/choose), we'll be happy to help! 1. If you haven't already done so, please fork prism-themes and clone it to your machine. It would also be wise to create a new branch to work on. From 487b7e5248b41e0b1de169f5bee23431e2231bf0 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 19 Sep 2021 16:49:13 +0800 Subject: [PATCH 08/14] Update security issues subsection --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f607714..fc62778 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -26,7 +26,7 @@ If you run into an error or a bug while using a theme from this repository: ### Security issues -In particular, if you discover a security issue, please **do not** file a public issue, and instead, send a report privately to **insert email here**, and we will correspond with you from there. +In the case of security issues, please check our [Security Policy](SECURITY.md) for details instead. ## Discussing the project From 765ae4b02843a33f1fb37eb6c45608894ab354f5 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 26 Sep 2021 19:45:08 +0800 Subject: [PATCH 09/14] Add override template for treeview plugin --- template/plugin-treeview.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 template/plugin-treeview.css diff --git a/template/plugin-treeview.css b/template/plugin-treeview.css new file mode 100644 index 0000000..bb9523d --- /dev/null +++ b/template/plugin-treeview.css @@ -0,0 +1,25 @@ +/** + * Treeview plugin overrides + * https://prismjs.com/plugins/treeview + */ + +/* The lines */ +/* Default for all: #ccc */ +.token.token.treeview-part .line-h:before, +.token.token.treeview-part .line-v:before { + border-left-color: unset; +} + +.token.token.treeview-part .line-v-last:before { + border-left-color: unset; + border-bottom-color: unset; +} + +.token.token.treeview-part .line-h:after { + border-bottom-color: unset; +} + +/* dotfile filenames such as '.gitignore' */ +.token.token.treeview-part .entry-name-dotfile { + opacity: unset; /* default: 0.5 */ +} From 36b9b3803f5fee134110ffe7125442523ca5eb0b Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Sun, 26 Sep 2021 21:15:46 +0800 Subject: [PATCH 10/14] Update README --- README.md | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 7d9332a..8cf969b 100644 --- a/README.md +++ b/README.md @@ -23,24 +23,9 @@ To use one of the themes, just include the theme's CSS file in your page. Exampl ``` -## Adding new themes +## Contributing new themes -To add your own theme/s, copy it/them into the `themes` directory and add your theme/s to the list of available themes in this readme. -The filenames for your themes have to be `themes/prism-.css` for the theme itself and `screenshots/prism-.png` for the screenshot. - -The screenshot will be created for you by running the following command: - -```bash -npm i && npx gulp screenshot -``` - -Before making a pull request, you can run the following command to verify that all checks pass: - -```bash -npm test -``` - -Thank you so much for contributing!! +Please see our [Contributing guide](CONTRIBUTING.md) for details. Thank you for contributing!! ## Available themes From 982158dbd8b4d6690fac48a67785eaa4fd695054 Mon Sep 17 00:00:00 2001 From: Wei Ting <59229084+hoonweiting@users.noreply.github.com> Date: Wed, 29 Sep 2021 21:27:49 +0800 Subject: [PATCH 11/14] Update contributing doc with links Co-authored-by: Michael Schmidt --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fc62778..c820eac 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -26,7 +26,7 @@ If you run into an error or a bug while using a theme from this repository: ### Security issues -In the case of security issues, please check our [Security Policy](SECURITY.md) for details instead. +In the case of security issues, please check our [Security Policy](https://github.com/PrismJS/prism-themes/security/policy) for details instead. ## Discussing the project @@ -43,7 +43,7 @@ Whether it's documentation or code, Prism Themes welcomes Pull Requests! (If you 3. Commit the changes, and include clear and concise commit messages when doing so. 4. Once you're done making the changes, [submit a Pull Request](https://github.com/PrismJS/prism-themes/compare)! - - If your Pull Request resolves an open issue (or more), please include `closes #issuenumber` (for each issue) in the description. + - If your Pull Request resolves an open issue (or more), please include [`closes #issuenumber`](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword) (for each issue) in the description. 5. A maintainer will look through your changes and review them accordingly, providing further instructions where necessary. From a57b2366ed43fa012909c5c6f44d5ff496c76121 Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Wed, 29 Sep 2021 21:31:19 +0800 Subject: [PATCH 12/14] Change "sample" to "example" --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c820eac..fd540e4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -21,7 +21,7 @@ If you run into an error or a bug while using a theme from this repository: 3. [Open a new issue](https://github.com/PrismJS/prism-themes/issues/new/choose) with a clear and concise title, and include any relevant information such as: - The name of the theme you're having an issue with - Any plugins that you're using, if applicable - - Screenshots and/or a reproducible sample + - Screenshots and/or a reproducible example - Browser information ### Security issues From a12eacfccebb683fa1679b3ed51a3a9afc729bce Mon Sep 17 00:00:00 2001 From: Wei Ting <59229084+hoonweiting@users.noreply.github.com> Date: Wed, 29 Sep 2021 21:32:44 +0800 Subject: [PATCH 13/14] Add template usage notes Co-authored-by: Michael Schmidt --- template/prism-theme-template.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/template/prism-theme-template.css b/template/prism-theme-template.css index 8d2c5c0..c6f4888 100644 --- a/template/prism-theme-template.css +++ b/template/prism-theme-template.css @@ -11,6 +11,18 @@ * the transition will be a little easier! */ +/** + * How to use this template: + * + * This file contains all the boilerplate necessary for a Prism theme along with template rules for you to fill in. + * + * All properties with the value `unset` are for you to change. + * You should fill in all `color` and `background` properties. + * If you don't need an `unset` property (e.g. `border-radius`), then feel free to remove it. + * + * Your finished theme should have all `unset` properties either filled in or removed. + */ + /* Set the main properties of the code, code blocks, and inline code */ code[class*="language-"], pre[class*="language-"] { From 22129840e7e64b5401e6d57788c9fdaeb720008c Mon Sep 17 00:00:00 2001 From: Wei Ting Date: Thu, 30 Sep 2021 01:02:08 +0800 Subject: [PATCH 14/14] Add more instructions to the template file --- template/prism-theme-template.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/template/prism-theme-template.css b/template/prism-theme-template.css index c6f4888..c2a3cbc 100644 --- a/template/prism-theme-template.css +++ b/template/prism-theme-template.css @@ -19,6 +19,8 @@ * All properties with the value `unset` are for you to change. * You should fill in all `color` and `background` properties. * If you don't need an `unset` property (e.g. `border-radius`), then feel free to remove it. + * You are also free to add more properties that aren't stated, such as `text-shadow`. + * If you wish to style the plugins, you may grab their selectors from their respective .css files in the template folder. * * Your finished theme should have all `unset` properties either filled in or removed. */ @@ -80,7 +82,7 @@ pre[class*="language-"] { white-space: normal; /* this is standard */ } -/* These are the minimum tokens you must style, though do feel free to rearrange them as you need */ +/* These are the minimum tokens you must style, you can rearrange them and/or style more tokens as you want */ .token.comment { color: unset; } @@ -215,7 +217,7 @@ pre[class*="language-"] { } /* LANGUAGE-SPECIFIC OVERRIDES */ -/* If you'd like your theme to have overrides for specific languages, here's an example */ +/* If you'd like your theme to have overrides for specific languages, here's an example, you can remove it and/or add more overrides */ .language-css .token.important { color: unset; }