jekyll-docs 3.5.2 → 3.6.0

data/site/sitemap.xml

@@ -2,191 +2,195 @@
 <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
 <loc>https://jekyllrb.com/docs/assets/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
+</url>
+<url>
+<loc>https://jekyllrb.com/docs/code_of_conduct/</loc>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/collections/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/conduct/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/configuration/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/continuous-integration/buddyworks/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/continuous-integration/circleci/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/continuous-integration/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/continuous-integration/travis-ci/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/contributing/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/datafiles/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/deployment-methods/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/drafts/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/extras/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/frontmatter/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/github-pages/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/history/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/includes/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/home/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/installation/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/affinity-team-captain/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/avoiding-burnout/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/becoming-a-maintainer/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/merging-a-pull-request/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/reviewing-a-pull-request/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/special-labels/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/maintaining/triaging-an-issue/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/migrations/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/pages/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/pagination/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/permalinks/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/plugins/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/posts/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/quickstart/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/resources/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/sites/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/static-files/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/structure/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/templates/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/themes/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/troubleshooting/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/upgrading/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/upgrading/0-to-2/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/upgrading/2-to-3/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/usage/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/variables/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/docs/windows/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/news/2013/05/05/jekyll-1-0-0-released/</loc>
@@ -433,24 +437,32 @@
 <lastmod>2017-07-17T09:40:37-07:00</lastmod>
 </url>
 <url>
+<loc>https://jekyllrb.com/news/2017/08/12/jekyll-3-5-2-released/</loc>
+<lastmod>2017-08-12T13:31:40-07:00</lastmod>
+</url>
+<url>
+<loc>https://jekyllrb.com/news/2017/09/21/jekyll-3-6-0-released/</loc>
+<lastmod>2017-09-21T13:38:20-07:00</lastmod>
+</url>
+<url>
 <loc>https://jekyllrb.com/tutorials/convert-site-to-jekyll/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/tutorials/custom-404-page/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/tutorials/home/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/tutorials/navigation/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/tutorials/orderofinterpretation/</loc>
-<lastmod>2017-08-12T13:36:54-07:00</lastmod>
+<lastmod>2017-10-24T08:07:43-07:00</lastmod>
 </url>
 <url>
 <loc>https://jekyllrb.com/</loc>

data/site/tutorials/convert-site-to-jekyll/index.html

@@ -4,13 +4,13 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="generator" content="Jekyll v3.5.2">
+  <meta name="generator" content="Jekyll v3.6.0">
   <link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites">
   <link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
   <link rel="stylesheet" href="/css/screen.css">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <!-- Begin Jekyll SEO tag v2.2.3 -->
+  <!-- Begin Jekyll SEO tag v2.3.0 -->
 <title>Convert an HTML site to Jekyll | Jekyll • Simple, blog-aware, static sites</title>
 <meta property="og:title" content="Convert an HTML site to Jekyll">
 <meta property="og:locale" content="en_US">
@@ -20,12 +20,12 @@
 <meta property="og:url" content="https://jekyllrb.com/tutorials/convert-site-to-jekyll/">
 <meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
 <meta property="og:type" content="article">
-<meta property="article:published_time" content="2017-08-12T13:36:54-07:00">
+<meta property="article:published_time" content="2017-10-24T08:07:43-07:00">
 <meta name="twitter:card" content="summary">
 <meta name="twitter:site" content="@jekyllrb">
 <meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
 <script type="application/ld+json">
-{"@context":"http://schema.org","@type":"BlogPosting","headline":"Convert an HTML site to Jekyll","datePublished":"2017-08-12T13:36:54-07:00","dateModified":"2017-08-12T13:36:54-07:00","description":"If you’re looking for themes for your Jekyll site, you don’t have to restrict yourself to existing Jekyll themes. It’s pretty easy to convert almost any static HTML files into a Jekyll website.","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/convert-site-to-jekyll/"},"url":"https://jekyllrb.com/tutorials/convert-site-to-jekyll/"}</script>
+{"name":null,"description":"If you’re looking for themes for your Jekyll site, you don’t have to restrict yourself to existing Jekyll themes. It’s pretty easy to convert almost any static HTML files into a Jekyll website.","url":"https://jekyllrb.com/tutorials/convert-site-to-jekyll/","headline":"Convert an HTML site to Jekyll","dateModified":"2017-10-24T08:07:43-07:00","datePublished":"2017-10-24T08:07:43-07:00","sameAs":null,"@type":"BlogPosting","author":null,"image":null,"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/convert-site-to-jekyll/"},"@context":"http://schema.org"}</script>
 <!-- End Jekyll SEO tag -->
 
   <!--[if lt IE 9]>
@@ -152,49 +152,40 @@
 
 <p>We’ll start with a <em>basic Jekyll site</em> consisting of three files:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>├── _config.yml
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>├── _config.yml
 ├── _layouts
 │   └── default.html
 └── index.md
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Manually create these three files in a folder called <code class="highlighter-rouge">my_jekyll_site</code> or whatever suits you the most, and place <code class="highlighter-rouge">default.html</code> inside a folder named <code class="highlighter-rouge">_layouts</code>.</p>
 
-<div class="language-sh highlighter-rouge">
-<pre class="highlight"><code><span class="gp">$ </span>touch _config.yml index.md default.html
-<span class="gp">$ </span>mkdir _layouts <span class="o">&amp;&amp;</span> mv default.html _layouts
-</code></pre>
-</div>
+<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>touch _config.yml index.md default.html
+<span class="nv">$ </span>mkdir _layouts <span class="o">&amp;&amp;</span> mv default.html _layouts
+</code></pre></div></div>
 
 <p>Fire up your favorite editor, and populate the contents of the <code class="highlighter-rouge">default.html</code> and <code class="highlighter-rouge">index.md</code> files as follows:</p>
 
 <p><strong>_config.yml</strong></p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="s">name</span><span class="pi">:</span> <span class="s">My Jekyll Website</span>
-</code></pre>
-</div>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">name</span><span class="pi">:</span> <span class="s">My Jekyll Website</span>
+</code></pre></div></div>
 
 <p><strong>_layouts/default.html</strong></p>
 
-<div class="language-html highlighter-rouge">
-<pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
+<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
 <span class="nt">&lt;html&gt;</span>
   <span class="nt">&lt;body&gt;</span>
      {{ content }}
   <span class="nt">&lt;/body&gt;</span>
 <span class="nt">&lt;/html&gt;</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p><strong>index.md</strong></p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="nn">---</span>
-<span class="s">title</span><span class="pi">:</span> <span class="s">My page</span>
-<span class="s">layout</span><span class="pi">:</span> <span class="s">default</span>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
+<span class="na">title</span><span class="pi">:</span> <span class="s">My page</span>
+<span class="na">layout</span><span class="pi">:</span> <span class="s">default</span>
 <span class="nn">---</span>
 
 <span class="c1"># {{ page.title }}</span>
@@ -204,16 +195,13 @@
 <span class="s">&lt;!--</span>
 <span class="s">You can use HTML elements in Markdown, such as the comment element, and they won't be affected by a markdown parser. However, if you create an HTML element in your markdown file, you cannot use markdown syntax within that element's contents.</span>
 <span class="s">--&gt;</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Now <code class="highlighter-rouge">cd</code> to <code class="highlighter-rouge">my_jekyll_site</code> and serve the site with the built-in server:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>cd my_jekyll_site
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd my_jekyll_site
 jekyll serve
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p class="note info">If you have a Gemfile, <a href="/docs/quickstart/#about-bundler">use Bundler</a> by typing <code class="highlighter-rouge">bundle exec jekyll serve</code> instead.</p>
 
@@ -224,7 +212,7 @@ jekyll serve
 <ul>
   <li>The <code class="highlighter-rouge">_config.yml</code> file contains settings that Jekyll uses as it processes your site. An empty config file will use default values for building a Jekyll site. For example, to convert <a href="https://learnxinyminutes.com/docs/markdown/">Markdown</a> to HTML, Jekyll will automatically use the <a href="https://rubygems.org/gems/kramdown/">kramdown Markdown filter</a>, without any need to specify it.</li>
   <li>Jekyll looks for files with <a href="/docs/frontmatter/">front matter tags</a> (the two sets of dashed lines <code class="highlighter-rouge">---</code> like those in <code class="highlighter-rouge">index.md</code>) and processes the files (populating site variables, rendering any <a href="https://shopify.github.io/liquid/">Liquid</a>, and converting Markdown to HTML).</li>
-  <li>Jekyll pushes the content from all pages and posts into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> variable in the layout specified (<code class="highlighter-rouge">default</code>) in the front matter tags.</li>
+  <li>Jekyll pushes the content from all pages and posts into the <code class="highlighter-rouge">{{ content }}</code> variable in the layout specified (<code class="highlighter-rouge">default</code>) in the front matter tags.</li>
   <li>The processed files get written as <code class="highlighter-rouge">.html</code> files in the <code class="highlighter-rouge">_site</code> directory.</li>
 </ul>
 
@@ -250,27 +238,21 @@ jekyll serve
 
 <p>Jekyll provides some <a href="/docs/templates/#filters">filters</a> to prepend a site URL before path. For example, you could preface your stylesheet like this:</p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"/assets/style.css"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">relative_url</span><span class="w"> </span><span class="p">}}</span>
-</code></pre>
-</div>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"/assets/style.css"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">relative_url</span><span class="w"> </span><span class="p">}}</span>
+</code></pre></div></div>
 
 <p>The <code class="highlighter-rouge">relative_url</code> filter will prepend the <a href="https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/"><code class="highlighter-rouge">baseurl</code></a> value from your config file (as<code class="highlighter-rouge">blog</code> for instance) to the input. This is useful if your site is hosted at a subpath rather than at the root of the domain (for example, <code class="highlighter-rouge">http://mysite.com/blog/</code>).</p>
 
 <p>You can also use an <code class="highlighter-rouge">absolute_url</code> filter. This filter will prepend the <code class="highlighter-rouge">url</code> <em>and</em> <code class="highlighter-rouge">baseurl</code> value to the input:</p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"/assets/style.css"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">absolute_url</span><span class="w"> </span><span class="p">}}</span>
-</code></pre>
-</div>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"/assets/style.css"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">absolute_url</span><span class="w"> </span><span class="p">}}</span>
+</code></pre></div></div>
 
 <p>Again, both <code class="highlighter-rouge">url</code> and <code class="highlighter-rouge">baseurl</code> can be defined in your site’s config file, like this:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>url: http://mysite.com
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>url: http://mysite.com
 baseurl: /blog
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>The result in the output will be <code class="highlighter-rouge">http://mysite.com/blog/assets/style.css</code>.</p>
 
@@ -284,9 +266,9 @@ baseurl: /blog
 
 <h2 id="2-identify-the-content-part-of-the-layout">2. Identify the content part of the layout</h2>
 
-<p>In <code class="highlighter-rouge">default.html</code>, find where the page content begins (usually at <code class="highlighter-rouge">h1</code> or <code class="highlighter-rouge">h2</code> tags). Replace the title that appears inside these tags with <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">page.title</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code>.</p>
+<p>In <code class="highlighter-rouge">default.html</code>, find where the page content begins (usually at <code class="highlighter-rouge">h1</code> or <code class="highlighter-rouge">h2</code> tags). Replace the title that appears inside these tags with <code class="highlighter-rouge">{{ page.title }}</code>.</p>
 
-<p>Remove the content part (keep everything else: navigation menu, sidebar, footer, etc.) and replace it with <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code>.</p>
+<p>Remove the content part (keep everything else: navigation menu, sidebar, footer, etc.) and replace it with <code class="highlighter-rouge">{{ content }}</code>.</p>
 
 <p>Check the layout again in your browser and make sure you didn’t corrupt or alter it up by inadvertently removing a crucial <code class="highlighter-rouge">div</code> tag or other element. The only change should be to the title and page content, which are now blanked out or showing the placeholder tag.</p>
 
@@ -296,15 +278,13 @@ baseurl: /blog
 
 <p>In your <code class="highlighter-rouge">index.md</code> file, add some front matter tags containing a <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">layout</code> property, like this:</p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="nn">---</span>
-<span class="s">title</span><span class="pi">:</span> <span class="s">Home</span>
-<span class="s">layout</span><span class="pi">:</span> <span class="s">default</span>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
+<span class="na">title</span><span class="pi">:</span> <span class="s">Home</span>
+<span class="na">layout</span><span class="pi">:</span> <span class="s">default</span>
 <span class="nn">---</span>
 
 <span class="s">Some page content here...</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Create another page for testing called <code class="highlighter-rouge">about.md</code> with similar front matter tags.</p>
 
@@ -314,21 +294,17 @@ baseurl: /blog
 
 <p>Add a <code class="highlighter-rouge">_config.yml</code> file in your root directory. In <code class="highlighter-rouge">_config.yml</code>, you can optionally specify the markdown filter you want. By default, <a href="https://kramdown.gettalong.org/">kramdown</a> is used (without the need to specify it). If no other filter is specified, your config file will automatically apply the following as a default setting:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>markdown: kramdown
-</code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>markdown: kramdown
+</code></pre></div></div>
 
 <p>You can also specify <a href="https://kramdown.gettalong.org/converter/html.html">some options</a> for kramdown to make it behave more like <a href="https://github.github.com/gfm/">GitHub Flavored Markdown (GFM)</a>:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>kramdown:
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>kramdown:
  input: GFM
  auto_ids: true
  hard_wrap: false
  syntax_highlighter: rouge
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <h2 id="5-test-your-pages">5. Test your pages</h2>
 
@@ -338,13 +314,11 @@ baseurl: /blog
 
 <p>You could define any number of layouts you want for pages. Then just identify the layout you want that particular page to use. For example:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 title: Sample page
 layout: homepage
 ---
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>This page would then use the <code class="highlighter-rouge">homepage.html</code> template in the <code class="highlighter-rouge">_layouts</code> folder.</p>
 
@@ -352,28 +326,22 @@ layout: homepage
 
 <h2 id="6-configure-site-variables">6. Configure site variables</h2>
 
-<p>You already configured the page title using <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">page.title</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tags. But there are more <code class="highlighter-rouge">title</code> tags to populate. Pages also have a <a href="https://moz.com/learn/seo/title-tag"><code class="highlighter-rouge">title</code></a> tag that appears in the browser tab or window. Typically you put the page title followed by the site title here.</p>
+<p>You already configured the page title using <code class="highlighter-rouge">{{ page.title }}</code> tags. But there are more <code class="highlighter-rouge">title</code> tags to populate. Pages also have a <a href="https://moz.com/learn/seo/title-tag"><code class="highlighter-rouge">title</code></a> tag that appears in the browser tab or window. Typically you put the page title followed by the site title here.</p>
 
 <p>In your <code class="highlighter-rouge">default.html</code> layout, look for the <code class="highlighter-rouge">title</code> tags below your <code class="highlighter-rouge">head</code> tags:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>&lt;title&gt;ACME Website&lt;/title&gt;
-</code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;title&gt;ACME Website&lt;/title&gt;
+</code></pre></div></div>
 
 <p>Insert the following site variables:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>&lt;title&gt;{{ page.title }} | {{ site.title }}&lt;/title&gt;
-</code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;title&gt;{{ page.title }} | {{ site.title }}&lt;/title&gt;
+</code></pre></div></div>
 
 <p>Open <code class="highlighter-rouge">_config.yml</code> and add a <code class="highlighter-rouge">title</code> property for your site’s name.</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>title: ACME Website
-</code></pre>
-</div>
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>title: ACME Website
+</code></pre></div></div>
 
 <p>Any properties you add in your <code class="highlighter-rouge">_config.yml</code> file are accessible through the <code class="highlighter-rouge">site</code> namespace. Similarly, any properties in your page’s front matter are accessible through the <code class="highlighter-rouge">page</code> namespace. Use dot notation after <code class="highlighter-rouge">site</code> or <code class="highlighter-rouge">page</code> to access the value.</p>
 
@@ -397,20 +365,17 @@ layout: homepage
 
 <p>In each post, add some basic content:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 title: My First Post
 layout: default
 ---
 
 Some sample content...
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Now let’s create a layout that will display the posts. Create a new file in <code class="highlighter-rouge">_layouts</code> called <code class="highlighter-rouge">home.html</code> and add the following logic:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 layout: default
 ---
 
@@ -422,37 +387,34 @@ layout: default
     &lt;/li&gt;
 {% endfor %}
 &lt;/ul&gt;
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Create a file called <code class="highlighter-rouge">blog.md</code> in your root directory and specify the <code class="highlighter-rouge">home</code> layout:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 title: Blog
 layout: home
 ---
-</code></pre>
-</div>
+</code></pre></div></div>
 
-<p>In this case, contents of <code class="highlighter-rouge">blog.md</code> will be pushed into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tag in the <code class="highlighter-rouge">home</code> layout. Then the <code class="highlighter-rouge">home</code> layout will be pushed into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tag of the <code class="highlighter-rouge">default</code> layout.</p>
+<p>In this case, contents of <code class="highlighter-rouge">blog.md</code> will be pushed into the <code class="highlighter-rouge">{{ content }}</code> tag in the <code class="highlighter-rouge">home</code> layout. Then the <code class="highlighter-rouge">home</code> layout will be pushed into the <code class="highlighter-rouge">{{ content }}</code> tag of the <code class="highlighter-rouge">default</code> layout.</p>
 
 <h3 id="how-layouts-work">How layouts work</h3>
 
-<p>When a layout specifies another layout, it means the content of the first layout will be stuffed into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tag of the second layout. As an analogy, think of Russian dolls that fit into each other. Each layout fits into another layout that it specifies.</p>
+<p>When a layout specifies another layout, it means the content of the first layout will be stuffed into the <code class="highlighter-rouge">{{ content }}</code> tag of the second layout. As an analogy, think of Russian dolls that fit into each other. Each layout fits into another layout that it specifies.</p>
 
 <p>The following diagram shows how layouts work in Jekyll:</p>
 
 <p><img src="../../img/jekylllayoutconcept.png" alt="Concept of Jekyll layouts"></p>
 
-<p class="image-description">In this example, the content from a Markdown document <code class="highlighter-rouge">document.md</code> that specifies <code class="highlighter-rouge">layout: docs</code> gets pushed into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tag of the layout file <code class="highlighter-rouge">docs.html</code>. Because the <code class="highlighter-rouge">docs</code> layout itself specifies <code class="highlighter-rouge">layout: page</code>, the content from <code class="highlighter-rouge">docs.html</code> gets pushed into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tag in the layout file <code class="highlighter-rouge">page.html</code>. Finally because the <code class="highlighter-rouge">page</code> layout specifies <code class="highlighter-rouge">layout: default</code>, the content from <code class="highlighter-rouge">page.html</code> gets pushed into the <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code> tag of the layout file <code class="highlighter-rouge">default.html</code>.</p>
+<p class="image-description">In this example, the content from a Markdown document <code class="highlighter-rouge">document.md</code> that specifies <code class="highlighter-rouge">layout: docs</code> gets pushed into the <code class="highlighter-rouge">{{ content }}</code> tag of the layout file <code class="highlighter-rouge">docs.html</code>. Because the <code class="highlighter-rouge">docs</code> layout itself specifies <code class="highlighter-rouge">layout: page</code>, the content from <code class="highlighter-rouge">docs.html</code> gets pushed into the <code class="highlighter-rouge">{{ content }}</code> tag in the layout file <code class="highlighter-rouge">page.html</code>. Finally because the <code class="highlighter-rouge">page</code> layout specifies <code class="highlighter-rouge">layout: default</code>, the content from <code class="highlighter-rouge">page.html</code> gets pushed into the <code class="highlighter-rouge">{{ content }}</code> tag of the layout file <code class="highlighter-rouge">default.html</code>.</p>
 
 <p>You don’t need multiple layouts. You could just use one: <code class="highlighter-rouge">default</code>. You have options for how you design your site. In general, it’s common to define one layout for pages and another layout for posts, but for both of these layouts to inherit the <code class="highlighter-rouge">default</code> template (which usually defines the top and bottom parts of the site).</p>
 
 <p>In your browser, go to <code class="highlighter-rouge">blog.html</code> and see the list of posts.
 Note that you don’t have to use the method described here. You could have simply added the <code class="highlighter-rouge">for</code> loop to any page, such as <code class="highlighter-rouge">index.md</code>, to display these posts. But given that you may have more complex logic for other features, it can be helpful to store your logic in templates separate from the page area where you frequently type your content.</p>
 
-<p class="note info">At minimum, a layout should contain <code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">content</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code>, which acts as a receiver for the <em>content</em> to be rendered.</p>
+<p class="note info">At minimum, a layout should contain <code class="highlighter-rouge">{{ content }}</code>, which acts as a receiver for the <em>content</em> to be rendered.</p>
 
 <h3 id="for-loops">For loops</h3>
 
@@ -460,15 +422,13 @@ Note that you don’t have to use the method described here. You could have simp
 
 <p>We’ve only scratched the surface of what you can do with <code class="highlighter-rouge">for</code> loops in retrieving posts. For example, if you wanted to display posts from a specific category, you could do so by adding a <code class="highlighter-rouge">categories</code> property to your post’s front matter and then look in those categories. Further, you could limit the number of results by adding a <code class="highlighter-rouge">limit</code> property. Here’s an example:</p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code>&lt;ul class="myposts"&gt;
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;ul class="myposts"&gt;
 <span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span>post<span class="w"> </span>in<span class="w"> </span>site.categories.podcasts<span class="w"> </span><span class="na">limit</span><span class="o">:</span><span class="mi">3</span><span class="w"> </span><span class="p">%}</span>
     &lt;li&gt;&lt;a href="<span class="p">{{</span><span class="w"> </span><span class="nv">post</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">post</span><span class="p">.</span><span class="nv">title</span><span class="p">}}</span>&lt;/a&gt;
     &lt;span class="postDate"&gt;<span class="p">{{</span><span class="w"> </span><span class="nv">post</span><span class="p">.</span><span class="nv">date</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">date</span><span class="p">:</span><span class="w"> </span><span class="s2">"%b %-d, %Y"</span><span class="w"> </span><span class="p">}}</span>&lt;/span&gt;
     &lt;/li&gt;
 <span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>This loop would get the latest three posts that have a category called <code class="highlighter-rouge">podcasts</code> in the front matter.</p>
 
@@ -480,25 +440,21 @@ Note that you don’t have to use the method described here. You could have simp
 
 <p>Identify the part of your code where the list of pages appears. Usually this is a <code class="highlighter-rouge">&lt;ul&gt;</code> element with various child <code class="highlighter-rouge">&lt;li&gt;</code> elements. Replace the code with the following:</p>
 
-<div class="language-html highlighter-rouge">
-<pre class="highlight"><code><span class="nt">&lt;ul&gt;</span>
+<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;ul&gt;</span>
   {% assign mypages = site.pages | sort: "order" %}
     {% for page in mypages %}
     <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ page.url | absolute_url }}"</span><span class="nt">&gt;</span>{{ page.title }}<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
     {% endfor %}
   <span class="nt">&lt;/ul&gt;</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>This example assumes each page would have front matter containing both a <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">order</code> property like this:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 title: My page
 order: 2
 ---
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Here the <code class="highlighter-rouge">order</code> property will define how the pages get sorted, with <code class="highlighter-rouge">1</code> appearing first in the list.</p>
 
@@ -506,17 +462,15 @@ order: 2
 
 <p>To manage page links this way, create a folder in your Jekyll project called <code class="highlighter-rouge">_data</code>. In this folder, create a file called e.g. <code class="highlighter-rouge">navigation.yml</code> with this content:</p>
 
-<div class="language-yaml highlighter-rouge">
-<pre class="highlight"><code><span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Sample page 1</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">/page-1-permalink/</span>
+<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Sample page 1</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">/page-1-permalink/</span>
 
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Sample page 2</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">/page-2-permalink/</span>
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Sample page 2</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">/page-2-permalink/</span>
 
-<span class="pi">-</span> <span class="s">title</span><span class="pi">:</span> <span class="s">Sample page 3</span>
-  <span class="s">url</span><span class="pi">:</span> <span class="s">/page-3-permalink/</span>
-</code></pre>
-</div>
+<span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Sample page 3</span>
+  <span class="na">url</span><span class="pi">:</span> <span class="s">/page-3-permalink/</span>
+</code></pre></div></div>
 
 <p class="note info">If you never wrote any YAML before, you’ll get quickly familiar with it. Take a look at <a href="https://learnxinyminutes.com/docs/yaml/">what you can do with YAML</a>.</p>
 
@@ -524,14 +478,12 @@ order: 2
 
 <p>To print the list of pages from the data file, use code like this:</p>
 
-<div class="language-html highlighter-rouge">
-<pre class="highlight"><code><span class="nt">&lt;ul&gt;</span>
+<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;ul&gt;</span>
     {% for link in site.data.navigation %}
     <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"{{ link.url }}"</span><span class="nt">&gt;</span>{{ link.title }}<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
     {% endfor %}
 <span class="nt">&lt;/ul&gt;</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>If you have more sophisticated requirements around navigation, such as when building a documentation site, see the <a href="/tutorials/navigation/">detailed tutorial on navigation</a>.</p>
 
@@ -545,10 +497,8 @@ order: 2
 
 <p>Where the sidebar code previously existed in <code class="highlighter-rouge">default.html</code>, pull in your “include” like this:</p>
 
-<div class="language-liquid highlighter-rouge">
-<pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">sidebar</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="p">%}</span>
-</code></pre>
-</div>
+<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">sidebar</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="p">%}</span>
+</code></pre></div></div>
 
 <p>You can break up other elements of your theme like this, such as your header or footer. Then you can apply these common elements to other layout files. This way you won’t have duplicate code.</p>
 
@@ -556,8 +506,7 @@ order: 2
 
 <p>Your Jekyll site needs an RSS feed. Here’s the <a href="http://www.w3schools.com/xml/xml_rss.asp">basic RSS feed syntax</a>. To create an RSS file in Jekyll, create a file called <code class="highlighter-rouge">feed.xml</code> in your root directory and add the following:</p>
 
-<div class="language-xml highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 layout: null
 ---
 
@@ -582,8 +531,7 @@ layout: null
         {% endfor %}
     <span class="nt">&lt;/channel&gt;</span>
 <span class="nt">&lt;/rss&gt;</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Make sure your <code class="highlighter-rouge">_config.yml</code> file has properties for <code class="highlighter-rouge">title</code>, <code class="highlighter-rouge">url</code>, and <code class="highlighter-rouge">description</code>.</p>
 
@@ -591,10 +539,8 @@ layout: null
 
 <p>In your <code class="highlighter-rouge">default.html</code> layout, look for a reference to the RSS or Atom feed in your header, and replace it with a reference to the file you just created. For example:</p>
 
-<div class="language-html highlighter-rouge">
-<pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"alternate"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span>  <span class="na">href=</span><span class="s">"{{ site.url }}/feed.xml"</span> <span class="na">title=</span><span class="s">"{{ site.title }}"</span><span class="nt">&gt;</span>
-</code></pre>
-</div>
+<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"alternate"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span>  <span class="na">href=</span><span class="s">"{{ site.url }}/feed.xml"</span> <span class="na">title=</span><span class="s">"{{ site.title }}"</span><span class="nt">&gt;</span>
+</code></pre></div></div>
 
 <p>You can also auto-generate your posts feed by adding a gem called <a href="https://help.github.com/articles/atom-rss-feeds-for-github-pages/"><code class="highlighter-rouge">jekyll-feed</code></a>. This gem will also work on GitHub Pages.</p>
 
@@ -602,8 +548,7 @@ layout: null
 
 <p>Finally, add a <a href="https://www.sitemaps.org/protocol.html">site map</a>. Create a <code class="highlighter-rouge">sitemap.xml</code> file in your root directory and add this code:</p>
 
-<div class="language-xml highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 layout: null
 search: exclude
 ---
@@ -630,8 +575,7 @@ search: exclude
     {% endfor %}
 
 <span class="nt">&lt;/urlset&gt;</span>
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <p>Again, we’re using a <code class="highlighter-rouge">for</code> loop here to iterate through all posts and pages to add them to the sitemap.</p>
 
@@ -660,12 +604,10 @@ search: exclude
 
 <p>If you do want Jekyll to process some page content (for example, to populate a variable that you define in your site’s config file), just add front matter tags to the page. If you don’t want any layout applied to the page, specify <code class="highlighter-rouge">layout: null</code> like this:</p>
 
-<div class="highlighter-rouge">
-<pre class="highlight"><code>---
+<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
 layout: null
 ---
-</code></pre>
-</div>
+</code></pre></div></div>
 
 <h2 id="13-conclusion">13. Conclusion</h2>