Added syntax theme customization guide

This commit is contained in:
squidfunk 2020-07-24 14:30:03 +02:00
parent ae0b187267
commit 55741dbfa8
5 changed files with 47 additions and 9 deletions

View File

@ -332,9 +332,47 @@ explained in the [official documentation][16].
[:octicons-file-code-24: Source][21] · [:octicons-file-code-24: Source][21] ·
:octicons-mortar-board-24: Difficulty: _easy_ :octicons-mortar-board-24: Difficulty: _easy_
If syntax highlighting is done with [Pygments][22], Material for MkDocs If [Pygments][22] is used, Material for MkDocs provides the [styles for code
provides the styles defining the [appeareance][21] of code blocks, which can blocks][21], which are built with a custom and well-balanced palette that works
be adjusted with [additional stylesheets][6]. equally well for both [color schemes][23]:
[21]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/markdown/_codehilite.scss - :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-number-color) " } `--md-code-hl-number-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-special-color) " } `--md-code-hl-special-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-function-color) " } `--md-code-hl-function-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-constant-color) " } `--md-code-hl-constant-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-keyword-color) " } `--md-code-hl-keyword-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-string-color) " } `--md-code-hl-string-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-name-color) " } `--md-code-hl-name-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-operator-color) " } `--md-code-hl-operator-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-punctuation-color) " } `--md-code-hl-punctuation-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-comment-color) " } `--md-code-hl-comment-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-generic-color) " } `--md-code-hl-generic-color`
- :material-checkbox-blank-circle:{: style="color: var(--md-code-hl-variable-color) " } `--md-code-hl-variable-color`
Let's say you want to change the color of `#!js "strings"`. While there are
several [types of string tokens][24], Material for MkDocs assigns a single color
to most of them.
Add an [additional stylesheet][6], and add:
``` css
:root {
--md-code-hl-string-color: #0FF1CE;
}
```
If you want to tweak a specific type of string, i.e. ``#!js `backticks` ``, you
can lookup the specific class name in the [syntax theme definition][25], and
override it as part of your additional stylesheet:
``` css
.highlight .sb {
color: #0FF1CE;
}
```
[21]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss#L60-L73
[22]: #use-pygments [22]: #use-pygments
[23]: ../setup/changing-the-colors.md#color-scheme
[24]: https://pygments.org/docs/tokens/#literals
[25]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/markdown/_codehilite.scss#L42

View File

@ -96,7 +96,7 @@ For each entry, the following fields are available:
[:octicons-file-code-24: Source][2] · [:octicons-file-code-24: Source][2] ·
:octicons-mortar-board-24: Difficulty: _moderate_ :octicons-mortar-board-24: Difficulty: _moderate_
The social links feature uses the available [icon integration][3] of Material for The social links feature uses the standard [icon integration][3] of Material for
MkDocs. If you want to use custom icons, follow the guide explaining how to MkDocs. If you want to use custom icons, follow the guide explaining how to
add [additional icons][4]. add [additional icons][4].

View File

@ -195,7 +195,7 @@ use your brand-specific colors), you can add an [additional stylesheet][8] and
tweak the values of the CSS variables. tweak the values of the CSS variables.
Let's say you're :fontawesome-brands-youtube:{: style="color: #EE0F0F" } Let's say you're :fontawesome-brands-youtube:{: style="color: #EE0F0F" }
__YouTube__, and want to set the primary color to your brand's palette, just __YouTube__, and want to set the primary color to your brand's palette. Just
add: add:
``` css ``` css
@ -220,7 +220,7 @@ variables.
:octicons-mortar-board-24: Difficulty: _easy_ :octicons-mortar-board-24: Difficulty: _easy_
Besides overriding specific colors, you can create your own, named color scheme Besides overriding specific colors, you can create your own, named color scheme
by wrapping the definitions in the `[data-md-color-scheme="..."]` by wrapping the definitions in the `#!css [data-md-color-scheme="..."]`
[attribute selector][9], which you can then set via `mkdocs.yml` as described [attribute selector][9], which you can then set via `mkdocs.yml` as described
in the [color schemes][10] section: in the [color schemes][10] section:

View File

@ -31,7 +31,7 @@ google_analytics:
[3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/integrations/analytics.html [3]: https://github.com/squidfunk/mkdocs-material/blob/master/src/partials/integrations/analytics.html
[4]: https://support.google.com/analytics/answer/1042508 [4]: https://support.google.com/analytics/answer/1042508
#### Enabling site search tracking #### Site search tracking
Besides basic page views, _site search_ can also be tracked to better understand Besides basic page views, _site search_ can also be tracked to better understand
how people use your documentation and what they expect to find. To enable how people use your documentation and what they expect to find. To enable

View File

@ -114,7 +114,7 @@ the following guidelines:
- If you cancel your subscription, you're removed as a collaborator and will not - If you cancel your subscription, you're removed as a collaborator and will not
receive future updates of the sponsor edition. However, you may continue to receive future updates of the sponsor edition. However, you may continue to
use the latest version that's available to you for __as long as you like__. __use the latest version__ that's available to you __as long as you like__.
Just remember that __[GitHub deletes private forks][13]__. Just remember that __[GitHub deletes private forks][13]__.
[12]: license.md [12]: license.md