Overview

Like in this small blog, usually you will want to organize together posts with similar contents in categories or tags.

What I wanted to do is assign a color to each category in a Jekyll project.

For that, I’ve created in the root directory a _categories directory where each category is going to be stored as a HTML (markdown) file.

.
├── _categories
│   ├── d3js.html
│   ├── data.html
│   ├── jekyll.html
│   ├── python.html
│   └── visualization.html

The code of a category _categories/jekyll.html could be the following:

---
title: Jekyll
date: 2016-12-17 11:09:00 -05:00
color: "#ffc107"
---

In this post _post/2017-11-20-jekyll-color-code-categories we’ll add a list of categories:

---
layout: post
title:  "Jekyll color code categories"
description: "How to implement reusable color code categories en Jekyll."
date:   2017-12-02 11:07:21 +0100
categories: ["Jekyll", "Visualization"]
---
## Overview
Like in this small blog, usually you will want ...

We also need to add a ‘categories’ collection in the config file ./_config.yml :

collections:
  - categories

For displaying the category in a post or in the home page, the snippet that I came up with is the following (probably a better solution could be thought up):

    {% for category in page.categories %}
        {% for category_template in site.categories %}
            {% if category == category_template.title %}
            <strong style="color:{{ category_template.color }};">
                {{ category }}
            </strong>
            {% endif %}
        {% endfor %}  
    {% endfor %}

Was hard to escape liquid template tags like {% xxx %) while writing this post; I found a clean solution for this problem without using any plug-ins in: https://stackoverflow.com/questions/3426182/how-to-escape-liquid-template-tags

The output of this solution is the one you can visualize in the blog.