Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use github-dark to highlight fence blocks in vitepress docs #3807

Merged
merged 2 commits into from
Nov 18, 2022
Merged

Use github-dark to highlight fence blocks in vitepress docs #3807

merged 2 commits into from
Nov 18, 2022

Commits on Nov 17, 2022

  1. refactor(docs): use default vitepress highlighter 

    Use the default vitepress highlighter instead of making our own
highlighter using shiki.

The benefits are:
  - We don't need to directly depend on shiki
  - `mermaid-example` code-blocks will use the same highlighting
    as other languages (e.g. `html`/`js`).
  - We can control the theme from the global `vitepress` config.
  - Darkmode/lightmode themes are supported
  - Escaping is already handled by the default highlight function
    @aloisklink
    aloisklink committed Nov 17, 2022
    Configuration menu
    Copy the full SHA
    6da6edf View commit details
    Browse the repository at this point in the history

  2. style(docs): use github-dark hightlight theme 

    Use the `github-dark` highlight theme for fence blocks in vitepress,
instead of the default `material-palenight` theme.

This increases the contrast ratio of `#comments` from 2.75:1 to 4.43:1,
which is a lot more visible.

It still doesn't reach WCAG 2.0 level AA contrast standards,
which requires 4.5:1 as a minimum constrast ratio, but 4.43:1 is
pretty close, and we don't need to manually modify the theme's colours.
    @aloisklink
    aloisklink committed Nov 17, 2022
    Configuration menu
    Copy the full SHA
    c30aa6f View commit details
    Browse the repository at this point in the history