My Concurrent Jekyll Gruntfile

Written by Pete Corey on Aug 28, 2014.

I wanted to have a single default grunt command kick off my Jekyll server (jekyll serve --watch), and my grunt watch task. After sleuthing around StackOverflow, I found a solution using grunt-jekyll and grunt-concurrent. Concurrency is needed to prevent the jekyll server from blocking.

module.exports = function(grunt) {
    grunt.initConfig({
        jekyll: {
            serve: {
                options: {
                    serve: true,
                    watch: true
                }
            }
        },
        less: {
            development: {
                options: {
                    paths: ['./less'],
                    yuicompress: true
                },
                files: {
                    'css/main.css': 'less/main.less'
                }
            }
        },
        watch: {
            less: {
                files: ['less/**/*.less'],
                tasks: ['less']
            }
        },
        concurrent: {
            all: {
                tasks: ['jekyll:serve', 'watch'],
                options: {
                    logConcurrentOutput: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-jekyll');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-concurrent');

    grunt.registerTask('default', ['concurrent:all']);
};

Prism.js and Github Pages

Written by Pete Corey on Aug 27, 2014.

In a previous post I mentioned that I would be using Prism.js as my syntax highlighter. Originally, I tried adding prism.rb to my _plugins directory. That let me use the prism liquid tag locally:

{% prism javascript %}
    //javascript goes here...
{% endprism %}

BUT! After pushing those changes to Github, I recieved a build error email:

The page build failed with the following error:

The tag prism in _posts/2014-08-26-look-ma-no-wordpress.markdown is not a recognized Liquid tag. For more information, see https://help.github.com/articles/page-build-failed-unknown-tag-error.

The link leads to a page explaining how to use Jekyll plugins with Github Pages. Unfortunately, only a handfull of plugins are supported, and Prism isn’t one of them.


The workaround solution is to remove prism.rb from your _plugins directory, and use plain markdown to build your code blocks instead:

<pre><code class="language-javascript">
    //javascript goes here...
</pre></code>

Aside from a little more verbosity, the only real downside that I can find with this approach is that if your first line of code is not inline with your <pre><code> line, you will have an extra line break before your first line of code.