Prism syntax highlighting tweaks

README.md

@@ -12,6 +12,7 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https://
 - [Run example site](#run-example-site)
 - [Configuration](#configuration)
 - [Disable toc for a blog post](#disable-toc-for-a-blog-post)
+- [Syntax highlighting](#syntax-highlighting)
 - [Shortcodes](#shortcodes)
 - [Favicons](#favicons)
 - [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
 
 See the [full list of supported shortcodes](https://cupper-hugo-theme.netlify.com/cupper-shortcodes/).

exampleSite/config.toml

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

exampleSite/content/post/cupper-shortcodes/index.md

@@ -62,6 +62,32 @@ hugo server --gc
 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`
 
+---
+
+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
 
 ```

static/css/styles.css

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