mirror of https://github.com/luizdepra/hugo-coder.git

Nour Agha
14.28.2023 86ed09e0fe61bd6abfe7649d4b4d5f3a42f5f1f0
refs
author Nour Agha <nour@agha.dev>
Wednesday, June 14, 2023 15:28 +0200
committer GitHub <noreply@github.com>
Wednesday, June 14, 2023 15:28 +0200
commit86ed09e0fe61bd6abfe7649d4b4d5f3a42f5f1f0
tree d1d3a554f00dd14efd076d092db7269c369821c5 tree | zip | gz
parent 1fb96cf9a920c46e01f3c0736cf01770c041617e view | diff
Syntax highlighting automatic color scheme switching (#815)

### Prerequisites

Put an `x` into the box(es) that apply:

- [ ] This pull request fixes a bug.
- [x] This pull request adds a feature.
- [ ] This pull request introduces breaking change.

### Description

This PR accomplishes the following:

- Adds GitHub light and dark syntax highlighting styles to the theme as
baseline (since it is already the 'default' style).
- Automatic syntax highlighting color scheme switching according to the
light and dark theme toggle.
- Syntax highlighting is by default no longer broken for users with a
defined Content Security Policy (CSP) since the CSS files are generated
and included with the theme natively rather than being loaded
externally.
- Allows users to set or override with different styles if needed by
removing `noClasses = false` (which defaults to true) and defining a
`style` under `markup.highlight` in `config.toml`. Alternatively, those
who want to use custom styles (or have a CSP) can simply and easily
override `_syntax.scss` and `_syntax_dark.scss` which now already exist
as a base with their own CSS styles, which also works better with the
theme and supports automatic color scheme switching.

### Issues Resolved

This is a very sane implementation of #331 with sensible defaults and a
good base experience for users who have not explicitly defined a `style`
for `markup.highlight`.

### Checklist

Put an `x` into the box(es) that apply:

#### General

- [x] Describe what changes are being made
- [x] Explain why and how the changes were necessary and implemented
respectively
- [x] Reference issue with `#<ISSUE_NO>` if applicable

#### Resources

- [x] If you have changed any SCSS code, run `make release` to
regenerate all CSS files

#### Contributors

- [x] Add yourself to `CONTRIBUTORS.md` if you aren't on it already
2 files added
8 files modified
206 ■■■■■ changed files
assets/scss/_syntax.scss 86 ●●●●● diff | view | raw | blame | history
assets/scss/_syntax_dark.scss 98 ●●●●● diff | view | raw | blame | history
assets/scss/coder-dark.scss 1 ●●●● diff | view | raw | blame | history
assets/scss/coder.scss 1 ●●●● diff | view | raw | blame | history
docs/configurations.md 6 ●●●● diff | view | raw | blame | history
exampleSite/config.toml 6 ●●●● diff | view | raw | blame | history
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.content 2 ●●● diff | view | raw | blame | history
resources/_gen/assets/scss/scss/coder-dark.scss_1fcd9040f1144c65015c77e7b93bc5ac.json 2 ●●● diff | view | raw | blame | history
resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.content 2 ●●● diff | view | raw | blame | history
resources/_gen/assets/scss/scss/coder.scss_5e1eb8e37c42cdfb6215b61e44dcfa5f.json 2 ●●● diff | view | raw | blame | history