Prism syntax highlighting tweaks

This commit is contained in:
Zachary Betz 2019-02-13 14:50:51 -06:00
parent 3c48720fef
commit 8168ee9456
4 changed files with 32 additions and 5 deletions

View File

@ -12,6 +12,7 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https://
- [Run example site](#run-example-site) - [Run example site](#run-example-site)
- [Configuration](#configuration) - [Configuration](#configuration)
- [Disable toc for a blog post](#disable-toc-for-a-blog-post) - [Disable toc for a blog post](#disable-toc-for-a-blog-post)
- [Syntax highlighting](#syntax-highlighting)
- [Shortcodes](#shortcodes) - [Shortcodes](#shortcodes)
- [Favicons](#favicons) - [Favicons](#favicons)
- [Credits](#credits) - [Credits](#credits)
@ -61,6 +62,10 @@ toc: false
--- ---
``` ```
## Syntax highlighting
Syntax highlighting is provided by [Prism](https://prismjs.com/). See the [full list of supported languages](https://prismjs.com/#languages-list).
## Shortcodes ## Shortcodes
See the [full list of supported shortcodes](https://cupper-hugo-theme.netlify.com/cupper-shortcodes/). See the [full list of supported shortcodes](https://cupper-hugo-theme.netlify.com/cupper-shortcodes/).

View File

@ -5,10 +5,6 @@ title = "Cupper"
theme = "cupper-hugo-theme" theme = "cupper-hugo-theme"
googleAnalytics = "UA-123456789-1" googleAnalytics = "UA-123456789-1"
# For more styles see https://xyproto.github.io/splash/docs/all.html
pygmentsCodefences = true
pygmentsStyle = "algol"
[taxonomies] [taxonomies]
tag = "tags" tag = "tags"

View File

@ -62,6 +62,32 @@ hugo server --gc
3. The close button uses `aria-label` to provide the text label "close", overriding the text content 3. The close button uses `aria-label` to provide the text label "close", overriding the text content
4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id` 4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
---
To get syntax highlighting, use regular markdown code fences:
````
```html
<div role="dialog" aria-labelledby="dialog-heading">
<button aria-label="close">x</button>
<h2 id="dialog-heading">Confirmation</h2>
<p>Press Okay to confirm or Cancel</p>
<button>Okay</button>
<button>Cancel</button>
</div>
```
````
```html
<div role="dialog" aria-labelledby="dialog-heading">
<button aria-label="close">x</button>
<h2 id="dialog-heading">Confirmation</h2>
<p>Press Okay to confirm or Cancel</p>
<button>Okay</button>
<button>Cancel</button>
</div>
```
## codePen ## codePen
``` ```

View File

@ -543,7 +543,7 @@ pre[class*=language-] {
} }
code[class*="language-"], pre[class*="language-"] { code[class*="language-"], pre[class*="language-"] {
text-shadow: none; text-shadow: none;
filter: grayscale(100%); /* filter: grayscale(100%); */
} }
pre[class*=language-][data-line] { pre[class*=language-][data-line] {
padding: 1em 0 0 2.25rem; padding: 1em 0 0 2.25rem;