Fix broken codecaption and other code blocks with the new highlighter. CSS is still a mess

3 files changed, 29 insertions, 15 deletions

diff --git a/README.md b/README.md
index 9ec01f6..d79abac 100644
--- a/README.md
+++ b/README.md
@@ -108,16 +108,18 @@ Octopress classic theme uses the pygments' `solarized dark` for highlighting. It
 * solarized_dark: use this to re-create the Octopress classic theme highlighting
 * solarized_dark256
 
+As on Hugo 0.28 the built-in Chroma highlighter is used by default. It does not support solarized dark yet. To keep using the highlighting by CSS add `pygmentsUseClassic=true` to the config file.
+
 The following options control code highlighting:
 
 ``` toml
 [params]
-  # Keep it as false please, the CSS file contains the code for highlighting
-  pygmentsuseclasses = false
-
   # If nothing is set, then solarized_light is used
   pygmentsstyle = "solarized_dark"
 
+  # Use internal highlighter instead of Chroma
+  pygmentsUseClassic=true
+
   # Highlight shortcode and code fences (```) will be treated similarly
   pygmentscodefences = true
 
diff --git a/sample-config.toml b/sample-config.toml
index e86a3e8..e77147b 100644
--- a/sample-config.toml
+++ b/sample-config.toml
@@ -12,10 +12,11 @@ disqusShortname = "Your disqus shortname"
 # Number of blog posts in each pagination page
 paginate = 6
 
-# Keep it as false please, the CSS file contains the code for highlighting
-pygmentsuseclasses = false
 pygmentsstyle = "solarized_dark"
 
+# Use internal highlighter instead of Chroma
+pygmentsUseClassic=true
+
 # You need to install Solarized from https://github.com/john2x/solarized-pygment
 # Octopress classic theme uses Solarized_dark
 # Options are solarized_dark (octopress), solarized_dark256 and solarized_light
diff --git a/static/css/hugo-octopress.css b/static/css/hugo-octopress.css
index b19e212..eb15386 100644
--- a/static/css/hugo-octopress.css
+++ b/static/css/hugo-octopress.css
@@ -1417,23 +1417,37 @@ li pre code {
     background: none;
     border: none
 }
-.pre-code,
+
+/*.pre-code,
 html .gist .gist-file .gist-syntax .highlighttable pre,
 .highlighttable code {
     font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important;
     overflow: scroll;
     overflow-y: hidden;
-    display: block;
-    padding: .8em;
     overflow-x: auto;
     line-height: 1.45em;
     color: #93a1a1 !important
+}*/
+
+/* Fix codecaption and the new Chroma highlighter */
+
+div.highlight > pre > code,
+pre > code
+{
+    overflow-y: hidden;
+    display: block;
 }
-.pre-code span,
-html .gist .gist-file .gist-syntax .highlighttable pre span,
-.highlighttable code span {
-    color: #93a1a1 !important
+
+td > div.highlight > pre > code,
+div.linenodiv > pre > code
+{
+    overflow: scroll;
+    overflow-y: hidden;
+    display: inline; !important
 }
+
+/* End fix codecaption and the new Chroma highlighter */
+
 .pre-code span,
 html .gist .gist-file .gist-syntax .highlighttable pre span,
 .highlighttable code span {
@@ -1741,9 +1755,6 @@ pre::-webkit-scrollbar-thumb:horizontal,
     -webkit-border-radius: 4px;
     border-radius: 4px
 }
-.highlighttable code {
-    background: #000
-}
 figure.code {
     background: none;
     padding: 0;