From 8168ee9456aafa394462ac0665556269046e6646 Mon Sep 17 00:00:00 2001
From: Zachary Betz <zwbetz@gmail.com>
Date: Wed, 13 Feb 2019 14:50:51 -0600
Subject: [PATCH] Prism syntax highlighting tweaks

---
 README.md                                     |  5 ++++
 exampleSite/config.toml                       |  4 ---
 .../content/post/cupper-shortcodes/index.md   | 26 +++++++++++++++++++
 static/css/styles.css                         |  2 +-
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 314a8cc..c36a6b7 100644
--- a/README.md
+++ b/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/).
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 3d1a5c1..68cee3d 100644
--- a/exampleSite/config.toml
+++ b/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"
 
diff --git a/exampleSite/content/post/cupper-shortcodes/index.md b/exampleSite/content/post/cupper-shortcodes/index.md
index 4afc46c..11f4c44 100644
--- a/exampleSite/content/post/cupper-shortcodes/index.md
+++ b/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
 
 ```
diff --git a/static/css/styles.css b/static/css/styles.css
index 0567670..33fdbb5 100644
--- a/static/css/styles.css
+++ b/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;