Expanding PHP Markdown to Accept CSS Classnames

Question

I'm a huge fan of Markdown (using it in nearly all of my PHP projects) but not a fan of its limited output. Much of the rendering is a bit too simple, and doesn't really allow me much control or freedom regardings its layout. For instance, I can insert an image:

![Alt Text](path/to/image.jpg)
This is my image!

But that will simply be converted into:

<p>
  <img src="path/to/image.jpg" alt="Alt Text" /> This is my image!
</p>

Suppose I wanted to float my image to the right? I cannot currently add any classes to the syntax, but wouldn't that be a nice feature to have? I'd like to be able to output:

<p>
  <img src="path/to/image.jpg" alt="Alt Text" class="alignright caption"> 
  This is my image!
</p>

Support for one or more CSS classes would be phenomenal. My question is regarding the best way of implementing this support into the PHP-version of Markdown.

Ideas?

Answer 1

There is no "best way" to implement this into Markdown; you would simply cease to be using Markdown (you instead have your own creation).

Thankfully, Markdown does not restrict your control or freedom as much as you think.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

Source: Markdown Syntax Documentation - Inline HTML

Answer 2

Markdown has no syntax in the core version to support CSS class names, inline styles, or id attributes. Depending on what you are doing, you may find Textile to be a better solution for you. In someways it is similar to Markdown, and in others it is quite different. For instance, to get the output you mentioned above in your question, you would use this Textile string:

!(alignright caption)path/to/image.jpg(Alt Text)! This is my image!

Which would translate to this:

<p>
  <img src="path/to/image.jpg" alt="Alt Text" class="alignright caption"> 
  This is my image!
</p>

You can also apply inline styles (horror of horrors) using {}

You can play with the syntax on their live demo page.

I had a bit of trouble finding a Textile parser for PHP, so your mileage on this answer may not be as much as I hoped. I did find this snippet, but it surely can't be the entire thing.