Jekyll Bootstrap with Rouge Highlighting not working on Windows

Question

I have just begun working with Jekyll and it seems like a really neat tool, however I cannot make highlighting to work. I would like to use 'rouge' highlighter for that purpose to use the same tool that will be later used by github pages - but when my pages are being served, they contain only raw code block. I have no idea what I am doing wrong.

This are the steps that I am following:

1. I am following Jekyll Bootstrap Quick Start instructions to the letter Link
2. Running command jekyll serve works as expected, default website is served. No errors in command line.
3. I am installing rouge via gem install rouge
4. I have verified that rouge is installed by checking gem list
5. I am adding highlighter: rouge to _config.yml file (replacing the default pygments)

6. I have added to following section to markdown page:

   ``` csharp
   public interface ITest : ITestKey
   {
       Task<string> SayHello(string name);
   }
   ```
   

7. I have created css style file by running rougify style monokai > test.css command

8. I have added that style to served page

   <link href="{{ ASSET_PATH }}/css/test.css" rel="stylesheet" type="text/css" media="all">
   

Now I would expect that the served page would contain code block with appropriate spans. That is not the case though - no errors or warning are thrown but the outcome of transformation is as follows:

  <div class="highlighter-rouge">
      <pre class="highlight">
          <code>
              public interface ITest : ITestKey
              {
                  Task&lt;string&gt; SayHello(string name);
              }
          </code>
      </pre>
    </div>

Could anyone please help ?

Answer 1

First things first then.

1st. Run Jekyll trough Bundler, which is the most recommended method, specially when hosting on GitHub Pages.

To do that:

1. Open your terminal and type gem install bundler

2. Run bundle update in order to update all your local gems.

3. Add a Gemfile (without any extension) to your site root and inside it type:

   source 'https://rubygems.org'
   
   gem 'github-pages'
   gem 'wdm'
   

4. Open the terminal and go to your project folder. Run bundle install.

This will make bundler install all gem dependencies for you. Adding the gem wdm will allow you to run everything properly on Windows. Bundler will create a file called Gemfile.lock where it's gonna be listed all the gems and dependencies used.

2nd. Don't leave blank spaces between ``` and the code language:

```cs
public interface ITest : ITestKey
{
    Task<string> SayHello(string name);
}
```

3rd: Add GFM to your _config.yml by doing like this:

markdown: kramdown
kramdown:
  input: GFM

4th: Serve Jekyll with bundler by this running this command: bundle exec jekyll serve --watch

Done! You should be ok then!

For this part:

I have created css style file by running rougify style monokai > test.css command

I have added that style to served page

<link href="{{ ASSET_PATH }}/css/test.css" rel="stylesheet" type="text/css" media="all">

I'm not sure what you're doing, so I'm not on the loop to guide you through.

Hope to have helped!

Answer 2

All right. Turns out I was doing everything well... However I was also using MetroUI Styling with default metro.js file included to website. Turns out that default metroui script was breaking the formatting...