Search code examples
jekylljekyll-bootstraprouge

Jekyll Bootstrap with Rouge Highlighting not working on Windows

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 ?

Solution

  • 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...