Jekyll and custom css

Question

Is there a way to include custom css tags in a jekyll site while using markdown for the entry files; for example, when I want to highlight a certain paragraph?

Answer 1

Markdown nor YAML FrontMatter have this built in. But you can make it yourself.

Say, you have foo.css that you want to include on certain posts.

In _posts/2013-02-03-higligting-foo.markdown:

---
css: foo
title: "Drupal Imagecache security vulnarability with DDOS attack explained"
tags: [drupal, imagecache, security, ddos]
---

Then, in _layouts/default.html:

{% if post && post.css %}
  <link rel='stylesheet' type='text/css' href='public/assets/{{ post.css }}.css' />
{% endif %}

If a post is shown, and the post has a variable defined, css, then use that to include the css file with the name. Note that this does not test wether the filename is correct, whether the css-file exists and so on.

Answer 2

If you mean can you give a particular paragraph in your Markdown document a specific class, you technically can, by just typing the paragraph tag the way you want it:

My **first** paragraph

<p class="mySpecialClass">My **second** paragraph</p>

My **third** paragraph

and Markdown will pass your p tag through to the resulting HTML.

However, Markdown gives up on parsing content inside tags you type yourself, so your paragraph's content won't be treated as Markdown — e.g. the word **second** in that paragraph won't show up as bold.

I switched to Textile for Jekyll posts because of this behaviour.

Good luck!