Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expanding PHP Markdown to Accept CSS Classnames

Tags:

css

php

markdown

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?

like image 243
Sampson Avatar asked Jan 27 '10 22:01

Sampson


1 Answers

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.

like image 76
Doug Neiner Avatar answered Nov 15 '22 06:11

Doug Neiner