Apply code highlighting background to code in HTML headers <h1> through <h6>

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Remove Google Search script from `404.md`. [#2597](https://github.com/mmistakes/minimal-mistakes/issues/2597) [#2737](https://github.com/mmistakes/minimal-mistakes/pull/2737)
 - Fix Font Awesome icon color in `contrast`, `dark`, `mint`, `neon`, `plum`, and `sunrise` skins. [#2724](https://github.com/mmistakes/minimal-mistakes/issues/2724)
+- Apply background code highlighting for any code in all 6 HTML headings from `<h1>` to `<h6>`. [#2771](https://github.com/mmistakes/minimal-mistakes/pull/2771)
 
 ### Enhancements
 

README.md

@@ -15,13 +15,42 @@ Minimal Mistakes is a flexible two-column Jekyll theme, perfect for building per
 
 **Note:** The theme uses the [jekyll-include-cache](https://github.com/benbalter/jekyll-include-cache) plugin which will need to be installed in your `Gemfile` and added to the `plugins` array of `_config.yml`. Otherwise you'll encounter `Unknown tag 'include_cached'` errors at build.
 
+## Table of Contents
+<details>
+<summary><b>(click to expand)</b></summary>
+<!-- MarkdownTOC -->
+
+1. [Screenshots](#screenshots)
+1. [Notable features](#notable-features)
+1. [Skins \(color variations\)](#skins-color-variations)
+1. [Demo pages](#demo-pages)
+1. [Installation](#installation)
+   1. [Gem-based method](#gem-based-method)
+   1. [Remote theme method](#remote-theme-method)
+1. [Usage](#usage)
+1. [Contributing](#contributing)
+   1. [Pull Requests](#pull-requests)
+1. [Development](#development)
+1. [Credits](#credits)
+   1. [Creator](#creator)
+   1. [Icons + Demo Images:](#icons--demo-images)
+   1. [Other:](#other)
+1. [License](#license)
+
+<!-- /MarkdownTOC -->
+</details>
+
+<a id="screenshots"></a>
+## Screenshots
+
 [![Minimal Mistakes live preview][2]][1]
 
 [1]: https://mmistakes.github.io/minimal-mistakes/
 [2]: screenshot.png (live preview)
 
 ![layout examples](screenshot-layouts.png)
 
+<a id="notable-features"></a>
 ## Notable features
 
 - Bundled as a "theme gem" for easier installation/upgrading.
@@ -35,6 +64,7 @@ Minimal Mistakes is a flexible two-column Jekyll theme, perfect for building per
 - [Google Analytics](https://www.google.com/analytics/) support.
 - UI localized text in English (default), Brazilian Portuguese (Português brasileiro), Catalan, Chinese, Danish, Dutch, Finnish, French (Français), German (Deutsch), Greek, Hindi (हिंदी), Hungarian, Indonesian, Irish (Gaeilge), Italian (Italiano), Japanese, Korean, Malayalam, Myanmar (Burmese), Nepali (Nepalese), Norwegian (Norsk), Persian (فارسی), Polish, Punjabi (ਪੰਜਾਬੀ), Romanian, Russian, Slovak, Spanish (Español), Swedish, Thai, Turkish (Türkçe), and Vietnamese.
 
+<a id="skins-color-variations"></a>
 ## Skins (color variations)
 
 This theme comes in nine different skins (in addition to the default one).
@@ -51,6 +81,7 @@ This theme comes in nine different skins (in addition to the default one).
 | --- | --- | --- |
 | [![aqua skin](https://mmistakes.github.io/minimal-mistakes/assets/images/aqua-skin-archive.png)](https://mmistakes.github.io/minimal-mistakes/assets/images/aqua-skin-archive-large.png) | [![neon skin](https://mmistakes.github.io/minimal-mistakes/assets/images/neon-skin-archive.png)](https://mmistakes.github.io/minimal-mistakes/assets/images/neon-skin-archive-large.png) | [![plum skin](https://mmistakes.github.io/minimal-mistakes/assets/images/plum-skin-archive.png)](https://mmistakes.github.io/minimal-mistakes/assets/images/plum-skin-archive-large.png) |
 
+<a id="demo-pages"></a>
 ## Demo pages
 
 | Name                                        | Description                                           |
@@ -74,10 +105,12 @@ Additional sample posts are available under [posts archive][year-archive] on the
 [tags-archive]: https://mmistakes.github.io/minimal-mistakes/tags/
 [year-archive]: https://mmistakes.github.io/minimal-mistakes/year-archive/
 
+<a id="installation"></a>
 ## Installation
 
 There are three ways to install: as a [gem-based theme](https://jekyllrb.com/docs/themes/#understanding-gem-based-themes), as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) (GitHub Pages compatible), or forking/directly copying all of the theme files into your project.
 
+<a id="gem-based-method"></a>
 ### Gem-based method
 
 With Gem-based themes, directories such as the `assets`, `_layouts`, `_includes`, and `_sass` are stored in the theme’s gem, hidden from your immediate view. Yet all of the necessary directories will be read and processed during Jekyll’s build process.
@@ -104,6 +137,7 @@ This allows for easier installation and updating as you don't have to manage any
 
 To update the theme run `bundle update`.
 
+<a id="remote-theme-method"></a>
 ### Remote theme method
 
 Remote themes are similar to Gem-based themes, but do not require `Gemfile` changes or whitelisting making them ideal for sites hosted with GitHub Pages.
@@ -131,18 +165,21 @@ To install:
 
 **Looking for an example?** Use the [Minimal Mistakes remote theme starter](https://github.com/mmistakes/mm-github-pages-starter/generate) for the quickest method of getting a GitHub Pages hosted site up and running. Generate a new repository from the starter, replace sample content with your own, and configure as needed.
 
+<a id="usage"></a>
 ## Usage
 
 For detailed instructions on how to configure, customize, add/migrate content, and more read the [theme's documentation](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/).
 
 ---
 
+<a id="contributing"></a>
 ## Contributing
 
 Found a typo in the documentation or interested in [fixing a bug](https://github.com/mmistakes/minimal-mistakes/issues)? Then by all means [submit an issue](https://github.com/mmistakes/minimal-mistakes/issues/new) or [pull request](https://help.github.com/articles/using-pull-requests/). If this is your first pull request, it may be helpful to read up on the [GitHub Flow](https://guides.github.com/introduction/flow/) first.
 
 For help with using the theme or general Jekyll support questions, please use the [Jekyll Talk forums](https://talk.jekyllrb.com/).
 
+<a id="pull-requests"></a>
 ### Pull Requests
 
 When submitting a pull request:
@@ -153,16 +190,19 @@ When submitting a pull request:
 
 Theme documentation and demo pages can be found in the [`/docs`](docs) if submitting improvements, typo corrections, etc.
 
+<a id="development"></a>
 ## Development
 
 To set up your environment to develop this theme, run `bundle install`.
 
-To test the theme, run `bundle exec rake preview` and open your browser at `http://localhost:4000/test/`. This starts a Jekyll server using content in the `test/` directory. As modifications are made to the theme and test site, it will regenerate and you should see the changes in the browser after a refresh.
+To test the theme, run `bundle exec rake preview` and open your browser at [`http://localhost:4001/test/`](http://localhost:4001/test/). This starts a Jekyll server using content in the `test/` directory. As modifications are made to the theme and test site, it will regenerate. Note that you will see the changes in your browser only after doing a manual page refresh.
 
 ---
 
+<a id="credits"></a>
 ## Credits
 
+<a id="creator"></a>
 ### Creator
 
 **Michael Rose**
@@ -171,12 +211,14 @@ To test the theme, run `bundle exec rake preview` and open your browser at `http
 - <https://twitter.com/mmistakes>
 - <https://github.com/mmistakes>
 
+<a id="icons--demo-images"></a>
 ### Icons + Demo Images:
 
 - [The Noun Project](https://thenounproject.com) -- Garrett Knoll, Arthur Shlain, and [tracy tam](https://thenounproject.com/tracytam)
 - [Font Awesome](http://fontawesome.io/)
 - [Unsplash](https://unsplash.com/)
 
+<a id="other"></a>
 ### Other:
 
 - [Jekyll](http://jekyllrb.com/)
@@ -193,6 +235,7 @@ To test the theme, run `bundle exec rake preview` and open your browser at `http
 
 ---
 
+<a id="license"></a>
 ## License
 
 The MIT License (MIT)

Rakefile

@@ -37,7 +37,8 @@ task :preview do
     "destination"   => base.join('test/_site').to_s,
     "force_polling" => false,
     "serving"       => true,
-    "theme"         => "minimal-mistakes-jekyll"
+    "theme"         => "minimal-mistakes-jekyll",
+    "port"          => 4001,
   }
 
   options = Jekyll.configuration(options)

_sass/minimal-mistakes/_base.scss

@@ -178,6 +178,15 @@ td > code {
   }
 }
 
+h1 > code,
+h2 > code,
+h3 > code,
+h4 > code,
+h5 > code,
+h6 > code {
+  background: $code-background-color;
+}
+
 /* horizontal rule */
 
 hr {

_sass/minimal-mistakes/_variables.scss

@@ -62,7 +62,7 @@ $light-gray: mix(#fff, $gray, 50%) !default;
 $lighter-gray: mix(#fff, $gray, 90%) !default;
 
 $background-color: #fff !default;
-$code-background-color: #fafafa !default;
+$code-background-color: $lighter-gray !default;
 $code-background-color-dark: $light-gray !default;
 $text-color: $dark-gray !default;
 $muted-text-color: mix(#fff, $text-color, 20%) !default;

test/_posts/2013-08-16-markup-syntax-highlighting.md

@@ -14,6 +14,41 @@ Syntax highlighting is a feature that displays source code, in different colors
 
 [^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
 
+**Code in headings:**
+
+# Heading 1 is the HTML equivalent of this: `<h1>Heading 1</h1>`
+## Heading 2 is the HTML equivalent of this: `<h2>Heading 2</h2>`
+### Heading 3 is the HTML equivalent of this: `<h3>Heading 3</h3>`
+#### Heading 4 is the HTML equivalent of this: `<h4>Heading 4</h4>`
+##### Heading 5 is the HTML equivalent of this: `<h5>Heading 5</h5>`
+###### Heading 6 is the HTML equivalent of this: `<h6>Heading 6</h6>`
+
+This is regular text. 
+
+**Code in unordered list:**
+
+- this is `code`
+    - this is `code`
+        - this is `code`
+- this is `code`
+    - this is `code`
+        - this is `code`
+
+**Code in ordered list:**
+
+This is regular text. 
+
+1. this is `code`
+    1. this is `code`
+        1. this is `code`
+1. this is `code`
+    1. this is `code`
+        1. this is `code`
+
+**Code in a quote:**
+
+> this is `code`
+
 ### GFM Code Blocks
 
 GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss`.
@@ -124,4 +159,4 @@ Module[{},
 
 An example of a Gist embed below.
 
-<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>
+<script src="https://gist.github.com/mmistakes/77c68fbb07731a456805a7b473f47841.js"></script>